Float does not display

Question

I face the problem that when I put float to my #middle-content. The float doesn't display. Moreover, this removes its background too. I want the middle-content to be at the right of #leftcontent. Help please!!

<body>
<div id="page">
    <div id="banner">
        <div id="cloud">
          <img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />    </div> 
      <!--cloud-->
<div id="home">
          <h2>HOME</h2>
        </div> 
      <!--home-->
    </div> <!--banner-->    

<div id="maincontent">
    <div id="leftcontent">
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">Home</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/catalog.html">About Us</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/calendar.html">Products</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/promotion.html">Contact</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">ABOUT US</a>
        </div><!--navigation-->
    </div> <!--leftcontent-->

  <div id="middle-content">
    <h1>Welcome To Bagger</h1>
  </div> <!--middle-content-->

  </div> <!--maincontent--> 

</div>  <!--page-->
</body>

And this is my CSS

#cloud {
    float: left;
    padding: 0px;
    margin: 0px;
}
#page {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}

#home {
    float: left;
    padding-left: 59px;
    padding-right: 59px;
    text-align:center;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    padding-top: 37px;
    padding-bottom: 37px;

}
#banner {
    background-color: #78c8f0;
    height: 130px;
}
.navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-decoration: none;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}
.navigation a {
    text-decoration: none;
    color: #000000;
    background-position: center;
}
#maincontent {
    background-color: #A6D2FF;
}


#leftcontent {
    width: 150px;
    display: table;
}
#middle-content {
    width: 400px;
    float: left;
}

In case anyone will need https://jsfiddle.net/a75xh9de/ – Morpheus Feb 18 '16 at 08:59 — Morpheus, Feb 18 '16 at 08:59

Roy Sonasish · Answer 1 · 2016-02-18T09:08:44.303

1

try this

#leftcontent {
    width: 150px;
    float:left;
}
#middle-content {
    width: 400px;
    float: left;
}

also I have added

#maincontent:before, 
#maincontent:after{
  clear:both;
  display:table;
  content:"";
}

to fix the background color

working code is here

edited Feb 18 '16 at 09:08

answered Feb 18 '16 at 09:00

Roy Sonasish

4,571
20
31

It works !! But when I edited a code as you suggest, the background color for main-content disappear. What should I do ? – Mac2000 Feb 18 '16 at 09:10
please check I have added some css in #maincontent:before, #maincontent:after, it will solve your issue – Roy Sonasish Feb 18 '16 at 09:13

score 1 · Accepted Answer · edited May 23 '17 at 12:31

You need to float the #leftcontent, and to fix the background, add a clear fix

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 59px;
  padding-right: 59px;
  text-align: center;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  padding-top: 37px;
  padding-bottom: 37px;
}
#banner {
  background-color: #78c8f0;
  height: 130px;
}
.navigation {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}
.navigation a {
  text-decoration: none;
  color: #000000;
  background-position: center;
}
#maincontent {
  background-color: #A6D2FF;
}
.clear:after {
  content: '';
  display: block;
  clear: left;
  height: 0;
}
#leftcontent {
  width: 150px;
  display: table;
  float: left;
}
#middle-content {
  padding-top: 1px;
  width: 400px;
  float: left;
}

<div id="page">
  <div id="banner" class="clear">
    <div id="cloud">
      <img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
    </div>
    <!--cloud-->
    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->

  <div id="maincontent" class="clear">
    <div id="leftcontent">
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">Home</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/catalog.html">About Us</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/calendar.html">Products</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/promotion.html">Contact</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">ABOUT US</a>
      </div>
      <!--navigation-->
    </div>
    <!--leftcontent-->

    <div id="middle-content">
      <h1>Welcome To Bagger</h1>
    </div>
    <!--middle-content-->

  </div>
  <!--maincontent-->

</div>
<!--page-->

I have also added 1px top padding to middle-content to stop the h2 margin causing a gap above maincontent

Update

Sounds like your dreamweaver does not support pseudo elements, see if this fixes your clear problem:

change css .clear:after to:

.clear {
    display:block; 
    height:0;
    overflow:hidden;
    clear:both;
}

and then in the html above, find the divs with the clear class and remove the class, then at the end of those divs, add a physical div to see if it fixes your problem:

<div class="clear"></div>

I've copy your html and css to my dreamweaver but the bankground color for maincontent is still missing. What should this be done? — Mac2000, Feb 18 '16 at 09:32
ok, not sure if it does, but it should. See above edit and see if that fixes it — Pete, Feb 18 '16 at 10:16
Ah ok, looks like cs4 is pretty old (released in 2008) so probably won't have support for after. You should try to update it as you are limiting yourself with what css you will be able to use — Pete, Feb 18 '16 at 10:23

score 0 · Answer 3 · answered Feb 18 '16 at 09:42

For your problems, i have the following solutions:

#maincontent can't show its background because its height is 0. You can fix it :

#maincontent {
  background-color: #A6D2FF;
  height:250px;
}

#leftcontent must have float:left so the middle-content to be at the right of #leftcontent

#leftcontent {
  width: 150px;
  display: table;
  float: left;
}

Float does not display

3 Answers3