Three Divs within a Div

HTML & CSS
1

Hi, I’m new to this site, and after much research found this to be the most active one!

So here it goes, if anyone could help me I’d be really greatful, I am new to web design so if this seems very simple I apologise.

I am trying to construct a layout which contains three divs in another div, but I am having problems, this is my html code:


<div id="wrapper">
	<div id="header"> LOGO WILL GO HERE </div>
    
<div id="nav"> Navigation will go here </div>

  <div id="widgetcontainer">
	<div id="widget1"></div>
		<div id="widget2"></div>	
		<div id="widget3"></div>
			</div>  <!-- #widgetcontainter-->
                        </div>  <!--#wrapper-->

And this is my CSS:


#widget1
{
float:left;
width:30%;
height: 200px;
background-color:white;
}

#widget2
{
float:right;
width:30%;
height: 200px;
background-color:green;
}

#widget3
{
margin: 0 auto;
width:30%;
height: 200px;
background-color:blue;
}

I am finding that they are all evenly spaced within the div, but they do not contain themselves within the #widgetcontainer.

Thanks in advance

2

Hi, Welcome to Sitepoint :slight_smile:

Floats are removed from the flow so your widgetcontainer will remain at zero height if it contains only floats. You need to contain your floats and the simplest method assuming you don’t need visible overflow is to use overflow:hidden.


#widgetcontainer{
overflow:hidden;
}

This creates a new block formatting context which ensures that the parent encompasses its children (even floated children).

If you need visible overflow then look at the clearfix method of containing floats.

3

Thanks for the response Paul O’B.

I have input this into my code but I still have the same results, the div widget2 is still overflowing?

Thanks in advance

4

Don’t worry about this, I have solved it myself.

Thanks for the initial help though

5

Glad you solved it :slight_smile:

When you solve a problem yourself it’s a good idea to mention your solution here as it may help others in a similar situation - unless it was just a typo of course. :slight_smile:

6

Yep, no problem.

I found that if I set the following code for the margins of each widget:

#widget1
{
float:left;
width: 31.5%;
height: 200px;
background-color:white;
margin-left: 15px;
}

#widget2
{
float:right;
width:31.5%;
height: 200px;
background-color:green;
margin-right: 15px;
}

#widget3
{
margin: 0 auto;
width:31.5%;
height: 200px;
background-color:blue;
}

So by having margin attributes for the left and right widget, then setting the central widget to have left and right auto margins it spaced them evenly and didn’t need to use the overflow: hidden; for #widgetcontainer.

Hope this helps someone else :slight_smile:

7

Hi,

Thanks for that :slight_smile:

You have to be careful here because #wrapper only takes note of the non-floated #widget3. Should the floats either side be taller than the wrapper will not grow with the floats because the floats are not contained.

This may not be an issue if those boxes are fixed height images or similar and therefore won’t grow. However, if those boxes hold text then a user resizing the text in the browser would break that structure.

A couple of other pointers (that may not be relevant but worth mentioning) are that you have three elements of 31.5% and then you have margins right and left of 15px. How wide does that make the whole structure?

31.5% + 31.5% + 31.5% + 15px + 15px =??

The above has to always add up to less than 100% or something will overlap. This won’t be true because at some stage the total will be greater than 100% and elements will overlap. You could have used percentage margins instead or perhaps have used some padding on a parent wrapper instead to create the side gutters. Of course I don’t know your set up so this could be wide of the mark.:slight_smile:

8

Thanks very much for the advice, I am new to all of this so the help is much appreciated.

To be honest this was just a trial layout, and I had changed the percentages when I was trying to fit them all in- in future I will use either percentages or pixels explicitly to avoid any problems.

I understand where you’re coming from making the divs grow, as in the future I will want them to grow, as this was just a mock up layout as I said. How would I do this?

Thanks in advance and for the speedy replies thus far

9

Hi,

To allow the divs to grow you would just need to remove the height from them. If you want an initial height then use min-height instead. You will then of course need to contain the floats as mentioned a couple of times which can be done with overflow:hidden on the wrapper or by using the clearfix method that I mentioned.

Before you get too far with your design you should think about the content that you want to display. If you have a lot of images to display then percentage columns may not be the best approach as columns may get too small too quickly and you may need perhaps a fixed column and a fluid one. It does all depend on the content so before you go to far down the design route you need yo shove some content in there to play with and to see what happens. Then you can really start to see how things can evolve and what needs to be done :slight_smile:

If you are expecting the three columns to grow in unison (equal column colours) then that won’t happen unless you instead use the display:table-cell properties (ie8+) instead of floating.

10

Ok thanks for the advice, to be honest this was just to try and get use to doing 3 divs as I’d not done, bit of an experiment but will bear this advice in mind for when I do get round to using it in a website

Thanks