CSS: Placing divs left/center/right inside header

Question

I've been trying to create a site with the following structure:

But I can't seem to get the header correct (e1 left, e2 centered, e3 right). I want the three elements e1, e2 and e3 to be left, middle and right positioned. This is what I'm trying:

<div id="wrapper">
<div id="header">
    <div id="header-e1">
        1
    </div>
    <div id="header-e2">
        2
    </div>
    <div id="header-e3">
        3
    </div>
</div>
<div id="nav">
    links
</div>
<div id="content">
    content
</div>
<div id="footer">
    footer
</div>
</div>

With this css:

#wrapper
{
    width: 95%;
    margin: 20px auto;
    border: 1px solid black;
}

#header
{
    margin: 5px;
}
#header-e1
{
    float: left;
    border: 1px solid black;
}
#header-e2
{
    float: left;
    border: 1px solid black;
}
#header-e3
{

    border: 1px solid black;
}

#nav
{
    margin: 5px;
}
#content
{
    margin: 5px;
}
#footer
{
    margin: 5px;
}

Can someone give me tips to what I can do? The structure is going to be used on a mobile website.

UPDATE

The code I have above gives me this: But I want the 2 centered and the 3 on the right side. I don't want to set the width to a percent because the content in the elements may vary, meaning it may be 20/60/20 - 10/80/10 - 33/33/33 or something else.

Solution 1

Utilize the Magic of Overflow: Hidden

If you can swap the html position of 2 & 3 like so:

<div id="header-e1">
    1 is wider
</div>
<div id="header-e3">
    3 is also
</div>
<div id="header-e2">
    2 conforms
</div>

Then you can set this css which will cause 2 to "fill" the available space because of the overlow: hidden on it. So if 1 & 3 expand, 2 narrows (shrink window down to see what happens at really small size).

#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}

Technically, you could keep your current html order and your float: left on both 1 & 2 and make 3 the flex div with overflow: hidden. You could do the same with 1 by reversing the order of the html completely and setting 2 & 3 to float: right with 1 having overflow: hidden. To me it would seem best to have the middle flex, but you know your application better than I.

Solution 2

If you are trying to make the site with a responsive width, you can try the following (33% is roughly one-third):

#header-e1 {
    float: left;
    width:33%;
    border: 1px solid black;
}

#header-e2 {
    float: left;
    width:33%;
    border: 1px solid black;
}

#header-e3 {
    float: left;
    width:33%;
    border: 1px solid black;
}

You could also used fixed widths for the divs. If you want the further from each other you can play with their left/right margins etc. Hope that helps!

Here is an edit for no widths:

#wrapper {
    position:relative; (add to wrapper)
}

#header-e1 {
    position:absolute;
    left:0;
    border:1px solid black;
}

#header-e2 {
    position:absolute;
    left:50%;
    border:1px solid black;
}

#header-e3 {
    position:absolute;
    right:0;
    border: 1px solid black;
}

Solution 3

You need to give the divs in your header a width, and float header-e3 left.

Note: They all have the same CSS properties, so just give them the same class like .headerDivs and then you don't have repeating code

Edit: here is a working jsfiddle: http://jsfiddle.net/eNDPG/

Comments

[L42]

Thank you, but I want to do it without setting the width of each element. Is that possible?

[L42]

Thank you, but I want to do it without setting the width of each element. Is that possible?

[Zhihao]

@user1539208 off the top of my head, I don't know of an easy way to do it if you want the widths of all child div as well as the space in between to add up to the width of #header. It would depend on how the widths of each are changing (what causes the widths to be different) and whether #header or #wrapper have fixed widths as well. Not sure if you can do this with CSS alone. Perhaps there is a way that I just don't know about though, in which case I'd be interested in hearing about it as well.

[RevConcept]

Hmmmm...I'm not sure how no width would work with your content, but I guess you could try absolute positioning.

[RevConcept]

I revised the answer I had above for you.

[Sakthivel]

This is a wonderful solution. but i have a problem. e2 stretches full and e3 is out of boundary.

[ScottS]

@codebrain: You would need to describe your problem (or illustrate it with a fiddle), as I do not know what you mean by "e3 is out of boundary."

[Sakthivel]

E1 and E2 are placed inside the container and e3 went out of container. #e1 { float:left; } #e2 { display:inline-block; overflow:hidden; } #e3 { float:right; } This fixed the issue Anyways your solution helped a lot and i upvoted it!

[confile]

you should also add .header{text-align: center;}

[P P]

<body><div id="header"> </div> <div id="middle"> <div id="left"> </div> <div id="right"> </div> <div id="midmain"> <div id="middle1"> </div> <div id="middle2"> </div> <div id="middle3"> </div> </div> </div> <div id="footer"> </div> </body>