SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy DIV problems, not clearing at the bottom

    Hey Guys,

    I am busy laying out a content page using a bunch of divs, I have got some of them to align next to eachother, using float:left; however, the problem is that I want to now create another "row" as such, however the next div that I add under then two that are floating left, is putting itself almost as a third column, how do I make the div break onto the next line without using a <br clear=all /> or a <br> ... any suggestions.

    please just excuse the code that I am using its EXTREMELY untidy, im still experimenting therefore it looks like it does.

    HTML Code:
    <div class="news" style="float: left; position: relative; left: 0px; top: 0px; margin-bottom: 10px; border-bottom: 1px solid #B2D1F0; width: 50%; height: 28px;"><img src="img.gif" alt="" width="165" height="17" border="0"></div>
    <div class="news" align="right" style="float: right;position: relative; left: 0px; top: 0px; margin-bottom: 10px; border-bottom: 1px solid #B2D1F0; width: 50%; height: 28px;">
    <select name="VenueID">
    <option value="1">- Select Venue -</option>
    <option value="1" selected="selected">- Richmond Park -</option>
    <option value="1">- sfsfsdfsfsfsdfsdfsdfsdfsd -</option>
    </select>
    </div>
    <div style="float: left; position: relative; margin-right: 10px;"><img src="img.jpg" alt="[FullName]" width="139" height="139" border="0"></div>
    <div style="float: left; position: relative; left:0; border-left: 1px solid #0066CC; padding-left: 5px; background-color: #F0F6FC; width: 66%; margin-bottom:10px;">
    <div style="color: #FF6600; font-size: 14px; margin-bottom: 3px;"><b>Contact Person</b></div>
    <div style=""><b>Name:</b> [contact name]</div>
    <div style=""><b>Position:</b> [Position]</div>
    <div style=""><b>Mobile:</b> [mobile]</div>
    <div style="margin-bottom: 5px;"><b>Email:</b> [email]</div>
    <div style=""><b>Special Talents:</b> [Special Talents]</div>
    <div style=""><b>Qualifications:</b> [Qualifications]</div>
    <div style=""><b>Interests:</b> [Interests]</div>
    </div>
    <div>This must go on a new line but they arent</div>
    Any help would be great. just need to get that last div to move to a new line, I am prolly being doff, but any help would be most appreciated..

    Thanks
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    clear: both; seems to have worked for me
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    clear: both; seems to have worked for me
    You Got it clear:both is specifically used to clear floats (as you might expect).

    clear prevents an element for appearing next to floated elements.

    clear:right clears floats on the right and clear:left clears floats on the left.

    Paul

  4. #4
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that explanation, I actually needed it cause, clear:both; seemed to work, however I didnt know why

    Thanks again Paul
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net


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
  •