Formatting question

[mike72]

I am trying to get to grips with using HTML/CSS to do my formatting instead of tables, but I have a problem I can't figure out. I have 2 divs (sidebarleft and sidebarright) within another div (bigborder) so that I can have 2 columns on my page. But unless I actually set the height in my CSS, there is no space in either of these divs. Here is my CSS :

#bigborder
{
width:701px;
background-color:#FFFFFF;
font-family:Verdana;
font-size:13px;
font-weight:bold;
border:29px solid black;
color:Black;
height:300px;
}

.sidebarleft
{
float: left;
width: 279px;
margin: 0px;
padding: 0px 0px 0px 0px;
}

.sidebarright
{
float: left;
width: 412px;
margin: 0px;
padding: 0px 0px 0px 0px;
}

<div id="bigborder">
<div class="sidebarleft">
</div>
<div class="sidebarright">
</div>
</div>

How do I create space in these 2 divs, without having to set the height in my CSS?

Many thanks,

Mike

[SB65]

Both divs will expand automatically to include any content inserted within them. At the moment there's no content and hence they have no height.

While there's nothing wrong with floating both divs it isn't required. There are a lot of useful column layouts here.

[mike72]

Hi,

The problem is that the divs don't expand, unless I set the height in my CSS...I am wondering if it might be something to do with the format of the divs that I have placed them within. The divs in my original post are placed within these divs as well :

#wrapper
{
margin: 0 auto;
padding: 0;
}

#page
{
width: 761px;
margin: 0 auto;
padding: 0px;
background-color:White;
font-family:Verdana;
font-size:13px;
font-weight:bold;
}

#main
{
width: 759px;
background-color:White;
color:white;
font-family:Verdana;
font-size:13px;
font-weight:bold;
border:1px solid black;
}

Are these causing the problem?

[pageguy]

See if adding min-height: 100%; to #wrapper helps at all.

[SB65]

What content do you have in your divs? If it's floated, or if it's all positioned absolutely, that might be the problem. A link to your page would help, otherwise your complete code.

[mike72]

Hi,

This is my complete code :

<div id="wrapper">
<div id="page">
<div id="header">
<img id="imgHeaderLeft" width="259" height="133" src="../../../../Content/Images/Gameplan/gameplanheader.png" alt="Header Left" border="0" vspace="0" hspace="0" style="FLOAT: left" />
<img id="imgHeaderRight" width="502" height="81" src="../../../../Content/Images/Gameplan/gameplanheader2.png" alt="Header Right" border="0" vspace="0" hspace="0" style="FLOAT: left" />

<IMG style="FLOAT: left" height=23 hspace=0 src="../../../../Content/Images/Gameplan/gameplanmenu.png" width=502 useMap=#nav vspace=0 border=0 />
<map name=nav>
<area shape=RECT coords=26,3,104,19 href="http://lovelyjubbly.info/Gameplan/">
<area shape=RECT coords=377,3,481,19 href="http://lovelyjubbly.info/Gameplan/Main/Contact/">
<area shape=RECT coords=118,3,260,19 href="http://lovelyjubbly.info/Gameplan/Main/HallOfFame/">
<area shape=RECT coords=276,3,363,19 href="http://forum.gameplan.org.uk/viewforum.php?f=9&sid=c44a50e759b28dd287ad52a0f7609940">
</map>
<IMG style="FLOAT: left" height=29 hspace=0 src="../../../../Content/Images/Gameplan/gameplanheaderback.png" width=68 vspace=0 border=0 />


<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="406" height="29">
<param name="source" value="../../../ClientBin/NFLCHeadlines.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>

</object>

</div>
<div id="main">


<div id="bigborder">
<div class="sidebarleft">
<p>
<br />
<img src="../../../../Content/Images/Gameplan/flags.png" alt="Flags" class="centerimage" /><br />

<img src="../../../../Content/Images/Gameplan/nflclogo.jpg" alt="Logo" class="centerimage" /><br />
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="275" height="75">
<param name="source" value="../../../ClientBin/NFLCScoreboard.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a>
</object><br /><br />
<img src="../../../../Content/Images/Gameplan/gotwimage.jpg" alt="Game Of The Week Image" class="centerimage" /><br />
<img src="../../../../Content/Images/Gameplan/gotwtext.jpg" alt="Game Of The Week Text" class="centerimage" />
</p>
</div>
<div class="sidebarright">
<p>
<img src="../../../../Content/Images/Gameplan/afceastteams.jpg" alt="AFC East" /><br />

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="70">
<param name="source" value="../../../ClientBin/NFLCAFCEastTeams.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>

</object>
</p>
</div>
</div>

The definition of the divs are as in my earlier posts, but without the height set in #bigborder, which solves the problem but means that I need to set the height in advance.

http://lovelyjubbly.info/gameplan/

[SB65]

Ah, I think your problem is that #bigborder isn't expanding, not that #sidebarright/left aren't expanding. #bigborder at the moment has no height as both the divs it contains are floated, and hence out of the normal flow of the page. Try adding overflow:auto to #bigborder. This will clear the floats at the end of the floated content and hence #bigborder will extend to include the containing floated divs.

[mike72]

Cheers...worked a treat!