Почему два divs не бок о бок

Я хотел бы получить большое изображение сверху, а затем два divs ниже бок о бок. Один содержащий заголовок и пункт и один образ:Почему два divs не бок о бок

У меня есть это:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 
    <img class="full-width-image" src="img/location/1.gif"> 
    <div id = "left"> 
     <h1 class = "top-padded">The Progs</h1> 
     <p>wdnweidnweldnwnwlenwwnww</p> 
    </div> 
    <div id = "right"> 
     <img class="half-width-image" src="img/location/1.gif"> 
    </div> 
</body>

И это:

#left {float: left;} 

#right {float: right;} 

.top-padded {padding-top: 1%;} 

.full-width-image { 
    width: 100%; 
    height: auto; 
} 

.half-width-image { 
    width: 30%; 
    height: auto; 
}

Но они все еще сложены друг на друга? Я, хотя плавать влево и вправо, должен был достичь этого эффекта?

источник

2015-09-20 JSHD

Удалить 'поплавок: право;' 'от # right'. Также добавьте 'display: inline-block;' как '# left' &' # right' – divy3993

Если я правильно понял, [это] (http://jsfiddle.net/aw4mhjkb/), что вы хотите правильно? – divy3993

Cheers divy3993. – JSHD

Попробуйте установить ширину контейнеров. Пожалуйста, попробуйте ввести следующий код:

#left {float: left; width: 69%;} 

#right {float: left; width: 30%;} 

.top-padded { 
    padding-top: 1%; 
} 

.full-width-image { 
    width: 100%; 
    height: auto; 
} 

.half-width-image { 
    height: auto; 
}

Установка поплавка слева от правого div также должна работать.

Во всяком случае, я бы рекомендовал сделать ширину правой ДИВ статичным, как:

#right {float: right; width: 300px;}

источник

2015-09-20 21:02:42 headione

Почему два divs не бок о бок

ответ

Смежные вопросы