SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Float Problem

  1. #1
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float Problem

    I have a page, which is centred within the browser window. Until now, there are no floats involved whatsoever.

    However, now I want two columns next to each other, but when I float them I seem to lose some of the divs they are in which are acting as backgrounds. Obviously, when I remove the floats they simply slide below each other.

    What can I do here?

    Thanks in advance.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You could post some code or a link (preferrably).

  3. #3
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the HTML:

    HTML Code:
     <div id="container">
      <div id="logoarea">
      <div id="nav">
      <div id="banner">
    	<div id="left">
     left hand column
        </div>
        <div id="rightbar">
        right hand column
        </div>
      </div>
    </div>
    And the CSS:

    Code:
    body {
    	background-color: #E1FFB6;
    	margin: 0px;
    	padding: 0px;
    	font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    	color: #666666;
    	font-size: 0.75em;
    	list-style-image: url(../images/bullet.gif);
    }
    #container {
    	width: 714px;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	margin-right: auto;
    	margin-left: auto;
    	background-image: url(../images/contentbg.gif);
    	background-repeat: repeat-y;
    	background-position: right;
    }
    
    #logoarea {
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	height: 113px;
    	background-image: url(../images/logoareabg.gif);
    	background-repeat: no-repeat;
    }
    #nav {
    	background-image: url(../images/navbg.jpg);
    	padding-left: 27px;
    	height: 24px;
    }
    #banner {
    	height: 168px;
    }
    #left {
    	width: 445px;
    	padding: 15px 15px 15px 20px;
    	float: left;
    }
    #rightbar {
    	width: 200px;
    	padding: 17px;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,369
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That code doesn't make a lot of sense but you proably need to clear the floats.
    Code:
    .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    Code:
    <div id="container">
    <div id="logoarea">
    	<div id="nav">
    	 <div id="banner">
    		<div id="left"> left hand column </div>
    		<div id="rightbar"> right hand column </div>
    	 </div>
    	 <div class="clearer"></div>
    	</div>
    </div>
    </div>
    If you are expecting your rightbar to be towards the right of the float then it won't. You will need to float it there.

    Why is there a list image on the body?

    I can't tell what teh layouts supposed to look like but make sure your heights are correct also and realise that when you specify a height then good browsers won't allow it to be anything opther than what you set. (Ie will automatically expand if content is greater).


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
  •