All geek questions in one place

Creating 2 divs float: on the right with one below the other

I do not know how to best express my title, so I will explain here. I have an HTML / CSS page with 3 div.

The first, div.presentation , does not have a floating rule. I want to make the menu on the right.

So, I have two more divs, div.login and div.categories . They both have float: right; and clear: both; .

I want something like this:

  -------------------------------------- ------------------ |div.presentation | |div.login | | | | | | | | | | | | | | | ------------------ | | | | ------------------ | | |div.categories | | | | | | | | | | | | | -------------------------------------- ------------------

But div.login and div.categories are apart from each other. Floating rules worked fine when div.categories did not exist.

I have what I want when I put <div style="height:100px"></div> between div.login and div.categories , but I'm sure we can do better. This is also based on luck.

Those are 3 divs display:inline-block .

Any idea? Many thanks.

EDIT http://jsfiddle.net/7nJp9/1/

+4
source share
3 answers

I changed your CSS:

 body { width: 90%; margin: auto; font-family: Arial, Verdana, sans-serif; font-size: 12px; background: #e6f0ff; } header.beta { position: absolute; top: 0; left: 0; width: auto; background: #fff7e0; opacity: 0.8; padding: 10px 50px; color: #444443; } header.logo { width: 90%; height: 125px; margin: auto; margin-top: 60px; margin-bottom: 30px; border: 1px dotted grey; } nav.tabs { display: none; } div.presentation, div.login, div.categories { position: relative; margin-top: 10px; display: inline-block; } div.right { position: relative; float: right; width: 25%; } div.presentation { width: 70%; clear: both; } div.login, div.categories { width: 100%; clear: both; } div.login header, div.presentation header, div.categories header { font-size: 14px; background: #0a97e2; padding: 3px 15px; color: white; border-radius: 10px 10px 0 0; } div.login section, div.presentation section, div.categories section { /*position: absolute;*/ width: 100%; background: white; border-radius: 0 0 5px 5px; } div.login section p, div.presentation section p { /* changed this */ margin: 0px 10px; padding: 3px 10px 3px 10px; } div.login section input { display: block; margin: auto; margin-bottom: 10px; } /* added this */ div.categories ul { margin: 0px 10px; padding: 3px 10px 3px 10px; }
+3
source

HTML

 <div class="left"> <div class="presentation"></div> </div> <div class="right"> <div class="login"></div> <div class="categories"></div> </div>

CSS

 .left { float: left; } .right { float: right; }
+1
source 
 <div style="width:430px; height:430px; border:1px solid;"> <div style="width:230px; height:100%; float:left; background:#000;"></div> <div style="width:180px; float:right; height:150px; border:1px solid; margin-top:20px; margin-right:10px;"></div> <div style="width:180px; float:right; height:150px; margin-top:20px; margin-right:10px; border:1px solid;"></div </div>

try it

+1
source

Source: https://habr.com/ru/post/1493846/

More articles:


All Articles