SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div align problems

    I can't seem for the life of me to get two div's to line up side by side, and not have the right one position itself underneath the left one.

    Since it is on localhost, here is a screen:



    Here is some CSS:

    Code:
    #menu {
    	position: relative;
    	background-color: #DFDFDF;
    	width: 100px;
    	height: 100%;
    	border: 1px solid #000000;
    	border-left-color: #efefef;
    	margin-bottom: 20px;
    	margin-top: 10px;
    
    }
    #content {
    	position: relative;
    	width: 600px;
    	margin-left: 120px;
    	margin-bottom: 20px;
    	margin-top: 10px;
    	background-color: #DFDFDF;
    	border: 1px solid #000000;
    
    }
    EDIT: Hmm it's not showing my screen....
    Attached Images Attached Images
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Aus
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try putting a float left to the menu div, and i would also recommend removing the height value as it usually causes weird problems further down the track.

  3. #3
    ********* Shroom mydster's Avatar
    Join Date
    Nov 2002
    Location
    tpyge
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #menu {
    position: relative;
    background-color: #DFDFDF;
    width: 100px;
    height: 100%;
    border: 1px solid #000000;
    border-left-color: #efefef;
    margin-bottom: 20px;
    margin-top: 10px;

    }

    Change to:

    #menu {
    position: relative;
    background-color: #DFDFDF;
    width: 100px;
    height: 100%;
    border: 1px solid #000000;
    border-left-color: #efefef;
    margin-bottom: 20px;
    margin-top: 10px;
    float: left;
    }


    Works for me

  4. #4
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, both of you. Will try it out.

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been working on a page using position: absolute; through out the layout. IE 6 the width displays well. Netscape 7.1 I get a scroll bar on the bottom. Being new to CSS, I'm not sure if I'm writing the code correctly. Both the HTML and CSS validate. Positioning the div's anywhere on the page is interesting.

    http://www.bcrosa.com/dilly1.html

    http://www.bcrosa.com/css/dilly1.css


    Bill

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Aus
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After a quick look it is probably because you are setting the width on your divs to a percentage and then adding extra padding. This could make the width add up to more than 100% and therefore you get a scrollbar. For example if you set the width to 100% and add padding of 10px the width will actually be 100% + 20px = scrollbar.

    NS and Mozilla get this right, and IE gets it wrong, so it actually looks ok in IE.

    I didn't go through and test it or anything but it's the first place I'd look.

  7. #7
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so now it's floating properly, but on pages where the content div has nothing in it (thus the menu div is longer) the menu acts like it is absolutely positioned, i.e it is not 'contained' in the main div, it overlaps and goes over it...

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ok so now it's floating properly, but on pages where the content div has nothing in it (thus the menu div is longer) the menu acts like it is absolutely positioned, i.e it is not 'contained' in the main div, it overlaps and goes over it...
    A float is basically removed from the flow and if bigger than its parent container it will overflow. Thats how it is meant to be.

    To contain the float the property clear is used and will cause the parent to exapand and contain the float.

    Code:
    <div class="parent">
       <div class="floatedstuff"></div>
       <p>some content</p>
       <br style="clear:both"/> 
    </div>
    For this to work properly floats should have a width and IE also likes the parent of the float to have a width as well.

    Hope this helps.

    Paul


Bookmarks

Posting Permissions

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