multiple div alignment issues

Question

I am trying to create multiple horizontal div elements on a page http://jsfiddle.net/bss6mc5a/

#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { display: inline; }
#body-right { float: right; content:url(http://placehold.it/240x930);}

The layout is how I would like it to be displayed however when I add text (remove the comment tag) to the the div is moving down when I would like it to stay in place.

Thank you for any assistance / correction in how I achieve this.

just to clarify - the body div is moving the body-right div down, I would like the body-right div to not move when adding content to body. — AndrewS, Nov 19 '14 at 06:42
2 answers already, but for more information look here: http://stackoverflow.com/questions/20566660/3-column-layout-html-css — Leon, Nov 19 '14 at 06:48

Qarib Haider · Accepted Answer · 2014-11-20T07:06:44.417

0

You need to define width for the divs:

#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { float: left; width: 960px; }
#body-right { float: right; content:url(http://placehold.it/240x930);}

Updated Fiddle:

http://jsfiddle.net/bss6mc5a/3/

Update 2:

http://jsfiddle.net/bss6mc5a/7/

edited Nov 20 '14 at 07:06

answered Nov 19 '14 at 06:46

Qarib Haider

4,796
5
27
38

Thank you for the help so far, just to add to this -- I need the middle div to be 960px and the two side (body-left and body-right to say the same size and all centered) – AndrewS Nov 19 '14 at 13:17
@user3094178: I have updated the fiddle again .. check it .. http://jsfiddle.net/bss6mc5a/7/ – Qarib Haider Nov 19 '14 at 13:26

score 0 · Answer 2 · answered Nov 19 '14 at 06:47

Instead of trying to float your elements left or right, you can just set fixed location objects.

I updated your JSFiddle to do what I'm thinking will help.

Basically, your left and right content areas would normally have fixed width (though your images make up for that), and would be positioned absolutely to put them in the right place, then the content is just centered with:

margin-left: auto;
margin-right: auto;
width: 300px; /* some arbitary width */

But check out the Fiddle, see if that helps.

score 0 · Answer 3 · answered Nov 19 '14 at 06:54

0

check this out I thing this what you want click Demo

Some changes in CSS

#body {
display: inline;
width: 960px;
float: left;
text-align: justify;
}

Hope this will help you...

answered Nov 19 '14 at 06:54

Uiupdates

204
1
13

score 0 · Answer 4 · answered Nov 19 '14 at 06:59

give your body divs a display: inline-block;

http://jsfiddle.net/bss6mc5a/5/

#body-left {content:url(http://placehold.it/240x930);display: inline-block; vertical-align: top;} #body { display: inline-block; vertical-align: top; width: 30%;} #body-right {content:url(http://placehold.it/240x930); display: inline-block; vertical-align: top;}

multiple div alignment issues

4 Answers4