What is creating this gap?

January 7, 201115 yr

Hello friends,

why a gap is created after i add a right sidebar widget(col2) in this layout ?

here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>Grid Layout Generator</title>
<style type='text/css'>
.wrapper{
  position: relative;
  float: left;
  left: 8px;
  width: 990px;
  margin-bottom: 10px;
  background-color: #e7e7e7;
  height:1880px;
  margin-left:auto;
  margin-right:auto;
}
.left1{
  position: relative;
  float: left;
  left: 5px;
  width: 188px;
  height: 188px;
  background-color: #d7d7d7;
}
.left2{
  position: relative;
  float: left;
  left: 15px;
  width: 188px;
  height: 188px;
  background-color: #d7d7d7;
}
.left3{
  position: relative;
  float: left;
  left: 25px;
  width: 188px;
  height: 188px;
  background-color: #d7d7d7;
}
.left4{
  position: relative;
  float: left;
  left: 35px;
  width: 188px;
  height: 188px;
  background-color: #d7d7d7;
}
.left5{
  position: relative;
  float: left;
  left: 45px;
  width: 188px;
  height: 188px;
  background-color: #d7d7d7;
}
body {
  border-width: 0px;
  padding: 0px;
  margin: 0px;
  font-size: 90%;
  background-color: #d7d7d7;
}
#top_nav{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 990px;
text-align: left;
width: 990px;
height:43px;
background:#e65c5c;
}
#logo{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 990px;
text-align: left;
height:89px;
background:#520f0f;
}
#nav{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 990px;
text-align: left;
width: 990px;
height:44px;
background:#fd8d8d;
}
#banner{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: left;
width: 990px;
height:192px;
background:#f3d52d;
}
#content{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 990px;
text-align: left;

}
#footer{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;

width: 990px;
text-align: left;

  margin-top: 44px;
  background-color: #805858;
  height:72px;
  clear:both;
}
#company_logos{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;

width: 990px;
text-align: left;
width: 990px;
  margin-top: 5px;
  background-color: #dfcaca;
  height:102px;
  clear:both;
}
#visa_logos{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;

width: 990px;
text-align: left;
width: 990px;
  margin-top: 5px;
  background-color: #bdbb25;
  height:49px;
  clear:both;
}
#footer_contact{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;

width: 990px;
text-align: left;
width: 990px;
  margin-top: 5px;
  background-color: #8eb9de;
  height:47px;

}
#legal{
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 990px;
text-align: left;
width: 990px;
margin-top: 5px;
background-color: #8eb9de;
height:68px;

}
#col1{
width:742px;
padding-right:5px;
float:left;
height:400px;
background:#5ba057;
padding-left:2px;
padding-bottom:2px;
padding-top:2px;

}
.col2{
width:241px;
padding-right:0px;
float:left;
height:272px;
background:#fcb37e;
margin-top:5px;
}

.col2_top{
width:241px;
padding-right:0px;
float:left;
height:272px;
background:#bd1010;
margin:0px;
height:25px;
}
#tab{
width:742px;
padding-right:2px;
float:left;
height:326px;
background:#90d0db;
padding-left:2px;
padding-bottom:2px;
padding-top:2px;
}
.slider_top{
width:742px;
padding-right:5px;
float:left;
height:25px;
background:#ad1111;
padding-left:2px;
padding-bottom:2px;
padding-top:2px;
margin-top:3px;
}
#slider{
width:742px;
padding-right:5px;
float:left;
height:289px;
background:#04a9fe;
padding-left:2px;
padding-bottom:2px;
padding-top:2px;
margin-top:3px;
clear:both;
}
#slider2{
width:742px;
padding-right:5px;
float:left;
height:373px;
background:#04a9fe;
padding-left:2px;
padding-bottom:2px;
padding-top:2px;
margin-top:15px;
}
#top_nav_wrappper{
background-attachment: scroll;
background-position: 0% 0%;
width: 100%;
}
#logo_wrapper{
background-attachment: scroll;
background-position: 0% 0%;
width: 100%;
}
#nav_wrapper{
background-attachment: scroll;
background-position: 0% 0%;
width: 100%;
}
#footer_wrapper{
background-attachment: scroll;
background-position: 0% 0%;
width: 100%;
}
#content_wrapper{
background-attachment: scroll;
background-position: 0% 0%;
width: 100%;
}
#banner_wrapper{
background-attachment: scroll;
background-position: 0% 0%;
width: 100%;
}
#slider_container{
margin-top:-50px;
}
.clear{
clear:both;
}
.clear_left{
clear:left;
}
</style>
</head>
<body>

<div id="top_nav_wrapper">
<div id="top_nav">
Top nav
</div><!--top_nav-->
</div><!--top_nav_wrapper-->
<div id="logo_wrapper">
<div id="logo">
Logo and contacts
</div><!--logo-->
</div><!--logo_wrapper-->
<div id="nav_wrapper"><!--nav_wrapper-->
<div id="nav">
</div><!--nav-->
<div><!--nav_wrapper-->
<div id="banner">
</div><!--banner-->
<div id="content_wrapper"><!--content_wrapper-->
<div id="content"><!--content-->
<div id="col1">
<div id="tab">

</div><!--tab-->
</div><!--col1-->
<div class="col2">
 <div class="col2_top"></div>
</div><!--col2-->

<div class="col2">
<div class="col2_top"></div>
</div><!--col2-->

<div class="slider_container">
<div class="slider_top">
slider top
</div><!--slider_top-->
<div id="slider">
</div><!--slider-->
</div><!--slider_container-->
<div class="slider_top">
slider top
</div><!--slider_top-->
<div id="slider2">
</div><!--slider-->
</div><!--content-->
</div><!--content_wrapper-->
<div id="footer_wrapper"><!--footer_wrapper-->
<div id="footer">
</div><!--footer-->
<div id="company_logos">
</div><!--company-logos-->
<div id="footer_contact">
</div><!--footer-contact-->
<div id="visa_logos">
</div><!--visa-->
<div id="legal">
</div><!--legal-->
</div><!--footer_wrapper-->


</body>
</html>

January 7, 201115 yr

If you're referring to the small space above .col2, it's margin-top: 5px which needs deleting.

.col2{
width:241px;
padding-right:0px;
float:left;
height:272px;
background:#fcb37e;
/*margin-top:5px;*/
}

There is also a large space on the left between the bottom of col1 and tab and the top of slider_container. On eway to cure this is to put all the left side divs in another container so that you have col1 tab and slider_container on the left and col2 on the right. Add this style and edit #slider_container:-

.left { float: left; width: 749px; }
#slider_container{
/*margin-top:-50px;*/
}

and add the new div and move .col2:-

<div id="content"><!--content-->

<div class="left"><!--new container-->
<div id="col1">col1
<div id="tab">tab	
</div><!--tab-->
</div><!--col1-->	

<div class="slider_container">
<div class="slider_top">
slider top
</div><!--slider_top-->
<div id="slider">
</div><!--slider-->
</div><!--slider_container-->
<div class="slider_top">
slider top
</div><!--slider_top-->
<div id="slider2">
</div><!--slider-->

</div><!--end of .left-->


<div class="col2"><p>col2</p>
 <div class="col2_top"><p>col2_top</p></div>
</div><!--col2-->

<div class="col2"><p>col2</p>
<div class="col2_top"><p>col2_top</p></div>
</div><!--col2-->


</div><!--content-->

Edited January 7, 201115 yr by Wickham

January 7, 201115 yr

Author

If you're referring to the small space above .col2, it's margin-top: 5px which needs deleting.
.col2{
width:241px;
padding-right:0px;
float:left;
height:272px;
background:#fcb37e;
/*margin-top:5px;*/
}

no i mean the gap above the first slider top(i.e red bar and the green bar) in the main left part?

Edited January 7, 201115 yr by sash_oo7

January 7, 201115 yr

I edited my last post without seeing your reply. My solution gets rid of that space on the left.

January 7, 201115 yr

Author

I edited my last post without seeing your reply. My solution gets rid of that space on the left.

ya thx that solved it

What is creating this gap?

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)