Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Formatting question

    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
    Last edited by mike72; 06-26-2010 at 05:23 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See if adding min-height: 100%; to #wrapper helps at all.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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/

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.
    Last edited by SB65; 06-27-2010 at 02:55 PM.

  • Users who have thanked SB65 for this post:

    mike72 (06-27-2010)

  • #8
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cheers...worked a treat!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •