Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS align three divs horizontally

Tags:

css

I'm having an issue aligning three divs inside a parent div, the effect I need is the following

|IMAGE| +TEXT+ |IMAGE| 

Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.

Something like this for example, if the user maximizes the window:

|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE| 

As you can see, the idea is that the center div grows, and auto width but keeping the structure.

How could I get that behaviour? Thanks in advance.

like image 945
lidermin Avatar asked Sep 02 '10 15:09

lidermin


People also ask

How do I make 3 divs horizontally in CSS?

Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.

How align div horizontally CSS?

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 you horizontally stack divs?

For modern browsers, you can use style="display: table-cell" for all the child divs and it would render horizontally properly.

How do I make divs side by side?

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.


1 Answers

#container { text-align: center; } #div-1 { float: left; } #div-2 { display: inline; } #div-3 { float: right; } 

If that still doesn't behave how you want, please give more detailed requirements.

like image 180
Bobby Jack Avatar answered Sep 21 '22 06:09

Bobby Jack