Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position two divs horizontally within another div

Tags:

html

css

layout

I haven't played with CSS for too long a time and am without references at the moment. My question should be fairly easy but googling isn't bringing up a sufficient answer. So, adding to the collective knowledge...

|#header---------------------------------------------------------------| |                               TITLE                                  | |#sub-title------------------------------------------------------------| |bread > crumb                    |                  username logout   | |#sub-left                        |                          #sub-right| |---------------------------------|------------------------------------| 

That's what I'm wanting my layout to be. The heading anyways. I wanted sub-title to contain sub-left AND sub-right. What css rules do I use to ensure a div is bound by the attributes of another div. In this case, how do I ensure that sub-left and sub-right stay within sub-title?

like image 409
Josh Smeaton Avatar asked Nov 27 '08 12:11

Josh Smeaton


People also ask

How do I put two divs inside a div?

The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

How do you horizontally align divisions?

To center a div horizontally on a page, simply set the width of the element and the margin property to auto. That way, the div will take up whatever width is specified in the CSS and the browser will ensure the remaining space is split equally between the two margins.

How do I position one div inside another?

To move the inner div container to the centre of the parent div we have to use the margin property of style attribute. We can adjust the space around any HTML element by this margin property just by providing desired values to it.


1 Answers

Its quite a common misconception that you need a clear:both div at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an overflow:hidden onto the container:

#sub-title { overflow:hidden; } 
like image 142
Darko Z Avatar answered Sep 29 '22 04:09

Darko Z