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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Floating Div's issue

    I am new to the forums and web designing, and trying to learn quickly. Please excuse the confusing ID tags, and probably what is a pretty simple question to answer.

    I am having a problem with a div float. I am trying to float left_content2_right to the right of left_content2_title, but it is floating right but staying below left_content2_ body. I tried using clears, but am willing to admit I didnt try the correct one.

    HTML:
    <div id="left_content2">
    <div id="wrapper_leftcontent2_left">
    <div id="left_content_2_title">CONTENT</div>
    <div id="left_content2_body">CONTENT</div>
    </div>
    <div id="left_content2_right">CONTENT</div>
    </div>

    CSS:
    #left_content2 {
    background-color: #FFF;
    width: 420px;
    border-top-width: 10px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #e8e8e8;
    float: left;
    }
    #wrapper_leftcontent2_left {
    float: left;
    height: auto;
    width: auto;
    }
    #left_content_2_title {
    width: 284px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: #FFF;
    background-image: url(../images/scoreboard.gif);
    height: 41px;
    }
    #left_content2_body {
    width: 600px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: #FFF;
    }
    #left_content2_right {
    background-color: #36C;
    width: 40px;
    margin-top: 10px;
    margin-left: 10px;
    float: right;
    clear: both;
    }


    Appreciate any help. Also does creating lots of wrapper div's slow down the page loading time? I have a lot of div's set up similar to this on several sections of my page.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you trying to make a layout like http://bonrouge.com/2c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    There's a couple of issues here.

    First, using clear:both on #left_content2_right is, itself, going to position that div so there is no floated content to either side of it, and prevent it sitting alongside you other div. So start by removing that property.

    Then, you have #left_content2_body with width 600px, sitting within #left_content2_left, and in turn #left_content2 which is only 420px wide. So #left_content2_left is too wide for the container and there is no room for #left_content2_right to float next to it.

    If you reduce the width of #left_content2_body then #left_content2_right will float where you want it to. The width needs to be no more than 360px (because then #left_content2_body has 360px width + 10px margin-left = 370px and #left_content2_right has width 40px + 10px margin-left = 50px, 370px +50px = 420px.

    Also, you should assign a width to #wrapper_leftcontent2_left to ensure consistent display across different browsers.

  • The Following 2 Users Say Thank You to SB65 For This Useful Post:

    djh101 (08-05-2010), efourdee (08-05-2010)

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by SB65 View Post
    There's a couple of issues here.

    First, using clear:both on #left_content2_right is, itself, going to position that div so there is no floated content to either side of it, and prevent it sitting alongside you other div. So start by removing that property.

    Then, you have #left_content2_body with width 600px, sitting within #left_content2_left, and in turn #left_content2 which is only 420px wide. So #left_content2_left is too wide for the container and there is no room for #left_content2_right to float next to it.

    If you reduce the width of #left_content2_body then #left_content2_right will float where you want it to. The width needs to be no more than 360px (because then #left_content2_body has 360px width + 10px margin-left = 370px and #left_content2_right has width 40px + 10px margin-left = 50px, 370px +50px = 420px.

    Also, you should assign a width to #wrapper_leftcontent2_left to ensure consistent display across different browsers.
    Thanks for the reply. I was able to come to this solution when i studied the css file a bit more carefully. Now that it is corrected I am having an IE browser issue that I will post in a moment.

    Really appreciate the replies guys.

    EDIT: Problem solved
    The problem was with a parent div not having a fixed width, that was screwing up the internet explorer display. Thanks again for the quick reply and solutions. This is a great forum. If anyone likes talking web design or being helpful over Instant Messenger, that would be cool. send me a pm.
    Last edited by efourdee; 08-05-2010 at 09:30 AM.

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Are you trying to make a layout like http://bonrouge.com/2c-hf-fixed.php

    My layout is two columns at the top, and three columns at the bottom. So I used the div's to split the bottom left into two columns. Thanks for the link.


  •  

    Tags for this Thread

    Posting Permissions

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