0

I've got three divs side by side in a container that sets itself to the width of the user's window.

I want them to stay nested next to each other, and centered as a unit in the dynamic container.
I'd like to do this without putting them into another div (mostly because I have a lot of them in this page as it is).

HTML:

<div id="content">
    <div id="nav_one">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahblah</p>
    </div>
    <div id="nav_three">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahblah</p>
    </div>
    <div id="nav_two">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahblah</p>
    </div>
</div>

CSS:

#nav_one {
    width: 208px;
    float: left;
    padding: 20px 10px 20px 10px;
    text-align: center;
}

#nav_two {
    width: 208px;
    margin: 0 auto;
    padding: 20px 10px 20px 10px;
    text-align: center;
}

#nav_three {
    width: 208px;
    float: right;
    padding: 20px 10px;
    text-align: center;
}
Alba Mendez
  • 4,432
  • 1
  • 39
  • 55
technopeasant
  • 7,809
  • 31
  • 91
  • 149

5 Answers5

2

Ok, after the comment below, I have a better idea what you are looking for, with the caveat of the container div's requiring 208px. I don't think that margin: auto will here to center all three in a group, so I propose float: left and use jQuery to calculate #content div, subtract .container widths, and divide by two to get left margin for the left-most .container div.

.container {
    width:208px;
    float:left;
    padding:0;
    margin: 0 auto;
    text-align:center;
    background-color: #cccccc;
}
.container p {
    text-align:justify;
    padding: 20px 10px 20px 10px;
}

$(document).ready(function(){
    var w = $('#content').width();
    var calw = (parseInt(w) - (208*3))/2;
    $('#left').css('margin-left',calw+'px');
});

<div id="content">
    <div class="container" id="left">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
</div>

EDIT To take into account the fixed-width 208px div containers, I think the easiest way to do this would be to use a little bit of jQuery:

$(document).ready(function(){
    var w = $('#content').width();
    var calw = (parseInt(w) - (208*3))/2;
    $('#left').css('margin-left',calw+'px');
});

Here's a jsfiddle to demonstrate the effect (updated with the above).

Of course, at this point, you might very well be better off using a container div with a margin auto applied to it, and a width of the 3 contianer div's you have with it. Of course, this approach causes problems in IE due to a bug in the way margin: auto is handled.

.container2 {
    width:208px;
    float:left;
    padding:0;
    margin: 0 auto;
    text-align:center;
    background-color: #cccccc;
}
.container2 p {
    text-align:justify;
    padding: 20px 10px 20px 10px;
}
#content2 {
    width: 624px;
    background-color: #ccccaa;
    margin: 0 auto;
}

<div id="content2">
    <div class="container2">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container2">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container2">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <br style="clear: both;"/>
</div>

Showing both.

Community
  • 1
  • 1
Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • that nests the three together, but against the left boarder of their container. is there any way to center the content divs content? as opposed to coding the containers to center within the content div. – technopeasant Feb 18 '11 at 01:54
  • Oh I see. First, nesting is not the right term; nesting would be one inside another inside another. Second, now that I know what you're talking about, let me think about it. It's possible. – Jared Farrish Feb 18 '11 at 01:59
  • Jared, it's close, but not quite right. The big problem here is that the parent div, content, has a width of 100% and these need a fixed-width of 208px. Your edit correctly layed them out, but they were stretched across the entire area instead of the 208px ea. Any other thoughts? i know this is a weird one. – technopeasant Feb 18 '11 at 02:49
  • Hey Jared.. The jQuery works.. thanks for the option! I ended up putting them in a container that's centered just for the ease of it. C'est la vie! On to other... challenges :) – technopeasant Feb 19 '11 at 00:05
  • Ok, just check to make sure it's working in IE. IE treats margin: auto differently (see my link in the paragraph above the last example). – Jared Farrish Feb 19 '11 at 00:06
0

use this:

#content {
    width: 684px;
    margin:0 auto;
}

#nav_one, #nav_two, #nav_three {
    width: 208px;
    float: right;
    padding: 20px 10px;
    text-align: center;
}
Mohsen Safari
  • 6,669
  • 5
  • 42
  • 58
0

Its generally a bad idea to use fixed width measurements in your css. Set your width measurements using a percentage and then restrict them using px measurements with min-width and max-width. This will allow the most portability to various screen sizes.
Basically what you are doing is micro-managing. By using percentages instead you allow the browser to render your content more easily.

gollum18
  • 182
  • 1
  • 8
0

Recent comment from @gollum18, so here's a better answer than all of the above.

HTML

<section>
    <div class="third center-align"></div>
    <div class="third center-align"></div>
    <div class="third center-align"></div>
</section>

CSS

section {
    text-align: center;
}
    .third {
        width: 33.333%;
        width: -webkit-calc(100% / 3);
        width: -moz-calc(100% / 3);
        width: calc(100% / 3);
    }
    .center-align {
        display: inline-block;
        text-align: left;
    }
technopeasant
  • 7,809
  • 31
  • 91
  • 149
0

If I understand correctly you are trying to center the 3 divs class container inside the div id content. Width of your container div determines the spacing of your 3 nesting divs, if you want them closer together simply adjust the width of the container div. If your container div happens to be a fixed width use padding to push content around inside.

AntonD
  • 1