Positioning with CSS

Question

The solution to this problem is probably extremely easy, but I've been struggling with it for a while an I just cannot get it working. I want to have 2 divs of different sizes aligned next to each other. Problem is that if I put any text into the first div, the other one is moved a few lines down.

The simplified version of the problem would look like this:

<html> <body> <div> <div style="background:red; display:inline-block; height:100%; width:50%;"> aaa<br> aaa<br> aaa<br> aaa<br> </div> <div style="background:green; display:inline-block; height:5em; width:5em;"> bbb </div> <div> </body> </html>

also, I'd rather not use the "position" property as I cannot predict the size of the "bbb" div and I want to put some more small divs under the "bbb"

as best practice: you should separate the styling from the markup. — avrahamcool
– avrahamcool, Commented Sep 13, 2013 at 13:03

Prisoner · Accepted Answer · 2013-09-13 13:00:27Z

3

Add vertical-align: top; - See the fiddle here: http://jsfiddle.net/b3LUZ/1/

Also, you have no closing tag for your first <div>, just another opening one.

answered Sep 13, 2013 at 13:00

Prisoner

27.7k11 gold badges78 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

avrahamcool Over a year ago

as best practice: you should separate the styling from the markup.

Prisoner Over a year ago

@avrahamcool, I assumed OP had just done this for a simplified question.

andrea.rinaldi · Accepted Answer · 2013-09-13 13:04:28Z

You have an error in you code.. There's a wrong-typed closing tag.. Should be </div>, not <div>.

However, I'd prefer using float css property set to "left" for both containers rather than display: inline-block.

After your divs you could put a div with "clear" css property set to "both". like this:

 <div style="background:red; float:left; height:100%; width:50%;"> aaa<br> aaa<br> aaa<br> aaa<br> </div> <div style="background:green; float:left; height:5em; width:5em;"> bbb </div> <div style="height: 0; width: 0; margin: 0; padding: 0; clear:both;"></div>

UID · Accepted Answer · 2013-09-13 13:21:04Z

You can use "float:left" property instead of "display:inline-block"

Please see the code below:

<div> <div style="background:red; float:left; height:100%; width:50%;"> aaa<br> aaa<br> aaa<br> aaa<br> </div> <div style="background:green; float:left; height:5em; width:5em;"> bbb </div> <div style="clear:both"></div> <p>To make sure rest of the content doesn't float and rather comes below these divs, give clear:"both" class after floating divs</p> <div>

You can refer to the fiddle:http://jsfiddle.net/aasthatuteja/eyrAn/

Please let me know if this resolves your issue.

Enjoy!

Love Trivedi · Accepted Answer · 2013-09-13 13:04:37Z

try this DEMO HERE

HTML

 <div> <div class="first"> aaa<br> aaa<br> aaa<br> aaa<br> </div> <div class="second"> bbb </div> </div>

CSS

.first{ background:red; display:inline-block; height:100%; width:50%; } .second{ background:green; display:inline-block; height:5em; width:5em; vertical-align:top; }

Collectives™ on Stack Overflow

Positioning with CSS

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related