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 3 of 3

Thread: Help With a Div

  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Help With a Div

    Hey Guys,

    I'm having a problem getting this "top piece" div working correctly. I merely want two div elements within this top piece to align next to each other. The problem I'm having is that the second div is sitting below the first one, which isn't what I want. Here's the CSS:

    body {
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
    }

    #top {
    width: 754px;
    border: 1px solid #000000;
    clear: all;
    }

    #top_left {
    width: 432px;
    border: 1px solid #ffcc00;
    }
    #top_right {
    width: 200px;
    text-align: right;
    border: 1px solid #ffcc00;
    }

    And here's the HTML:

    <div id="top">
    <div id="top_left"><img src="img/home_headline.gif" alt="" /></div>
    <div id="top_right"><p class="header">Visit Updates</p></div>
    </div>

    <div id="reveal_column">

    ...


    Things I've tried:

    - Floating the "top" elements: This screws up the rest of the page, for everything after "div id=top"

    - Clearing - I've tried clear:both, clear:all (without fully knowing the capability of "clear". No luck.

    - I've tried making them inline, span elements. However this throws off the text in "top-right". I need that to align to the right side of the page.

    Any suggestions would be much appreciated.

    Thanks.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating all the way

    Your initial approach was correct: floating the top_left div left and the top_right div right seems like a usable solution. However, since the top div doesn't contain any non-floated content, it will collapse, throwing off anything that follows it.

    There are three solutions:
    1. Give the top div a fixed hight (this may not be practical);
    2. Float the top div itself, and clear any content that follows it;
    3. Include non-floated, clearing content (like a p with a nbsp in it) after the two floated divs (use clear: both); to make this as inconspicuous as possible, you can reduce it to 1 px by specifying "height: 1px; line-height: 1px"
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    #1 worked. Great!

    I didn't think to set a fixed height on the containing top div. That works fine in this scenario.

    Thanks again!


  •  

    Posting Permissions

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