SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Utopia's Avatar
    Join Date
    Sep 2002
    Location
    United Kingdom
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating div's left and right / wrapping

    Is there a way I can have 2 50% width div's side by side, which DON'T wrap when i resize my browser?

    In Mozilla and Opera 7, it doesnt seem to happen, but in IE, i reduce the width a bit and all of a sudden the div's stack on top of each other, instead of remaining side by side

    I've got the left one set up with position: relative and float: left and right hand div is also set to position: relative but with float: right

    I've tried using display: block and display: inline, but im not entirely sure what these actually achieve, nor have I noticed any difference.

    If anybody has any clues on floating div's and stopping them wrapping, i'd like to hear about it

    Regards

    Matt

    p.s. code looks like this
    PHP Code:
    <div id="body">
    <
    div class="floatleft">blah blah</div>
    <
    div class="floatright">blah blah</div>
    </
    div
    in the stylesheet, floatleft and floatright are set with width: 48% and float: left, or float: right, depending on which one.

  2. #2
    SitePoint Member
    Join Date
    Dec 2002
    Location
    Lincoln, CA USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In My style sheet. "catcstyle.css" for calairedale.org that I do, I use a container div called class ".divcontainer". It's only setting is "position:relative;". The side by side divs are called class ".divleft" and class ".divright". They both reside inside ".divcontainer". In the style sheet, ".divleft" is set as follows:
    width:42%
    left:0px;
    position:absolute;
    top:0px;

    ".divright" is set as follows:
    left:45%;
    width:100%;
    position:absolute;
    top:0px;

    Go to http://www.calairedale.org and click on "officers". look at the source. Then take catcstyle.css as you please and play with things. I'm going to watch the answers to this one because what I've done isn't perfect.

    Good luck.

    Steve Hurs

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Don't position your <div>s at all, then float BOTH to the left or to the right (pick one for both). Make sure each <div> is less than 50% in width, make it something like 48%, and don't forget to take into account margins, borders and padding, which add to the overall space of the div!

    --Vinnie


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
  •