Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Auto height problem

Rokain
in Frontend

Featured Replies

Hello,

 

I have already searched the web and asked on another forum, but I didn't find the solution yet.

On the other forum they told me it was about the floats and that I should use 'overflow:hidden' in my maincontent, but it didn't work.

The problem is that my auto height function of the background from my content isn't working at all.

 

An example is located here: Rokain.com

 

As you can see at the bottem of the page where it says "Content Text", the background of my content stops.

I hope someone can review my CSS and post any corrections and/or comments to solve this problem.

 

Thanks in advance,

Rokain

 

CSS:

 


* {
padding:0;
margin:0;
outline:none;
}

html,body {
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
line-height:18px;
outline:none;
letter-spacing:0.0em;
background:#333;
}

#container{
width:100%;
height:auto;
height:100%; /* voor IE */
min-height: 800px;
}

#topbar {width:100%; height:20px; background:url(img/topbar.png);}
#header {width:874px; height:253px; background:url(img/header.png); margin-left:auto; margin-right:auto;}

.menu {width:874px; height:67px; background:url(img/menubg.png); margin-left:auto; margin-right:auto;}
.menu  a {color:#FFF; float:left; width:auto; margin-top:25px; margin-left:auto; padding-left:54px; text-decoration:none; font-size:18px;}
.menu  a:hover {color:#CCC; float:left; width:auto; margin-top:25px; margin-left:auto; padding-left:54px; text-decoration:none; font-size:18px;}


#maincontent {width:872px; height:auto; min-height:800px; background:url(img/contentbg.png); margin-left:auto; margin-right:auto;}
.contentlefth1 {float:left; width:562px; height:50px; background:#232323; margin-top:35px; }
.contentlefttitle {font-weight:bold; margin-left:15px; margin-top:18px;}
.contentlefttext {font-size:12px; margin-left:15px; margin-top:35px;}


.contentrighth1 {float:right; width:306px; height:66px; background:#303030; margin-top:-20px; clear:both;}
.contentrighttitleh1 {font-weight:bold; margin-left:15px; margin-top:25px;}
.contentrightexth1 {font-size:12px; margin-left:15px; margin-top:40px;}

.contentrighth2 {float:left; width:306px; height:66px; background:#303030; margin-top:280px; margin-left:567px;}
.contentrighttitleh2 {font-weight:bold; margin-left:15px; margin-top:25px;}
.contentrightexth2 {font-weight:bold; margin-left:15px; margin-top:35px;}

#clear { clear:both; }


a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5; 
opacity: 0.5;
-khtml-opacity: 0.5;
decoration:none;
}

a.linkopacity:hover img {
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0;
-khtml-opacity: 1.0; }



#footer {width:100%; height:138px; background:url(img/footer.png); margin-top:50px;}
.footerlinks {float:right; width:210px; margin-top:69px; margin-right:30px;}
.footerlinks a {color:#FFF; text-decoration:none; font-size:14px;}
.footerlinks a:hover {color:#CCC; text-decoration:none;}
.footercopyright {float:left; width:235px; color:#1a1a1a; font-size:12px; margin-top:80px; margin-left:20px;}

 

 

HTML:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
<div id="topbar"></div>
       <div id="header"></div>


 <div class="menu">
                <a href="index.html">Home</a>
                <a href="info.html">Informatie</a>
                <a href="fotos.html">Fotos</a>
                <a href="contact.html">Contact</a>
  </div>


			<div id="maincontent">

               	<div class="contentlefth1">
                   	<div class="contentlefttitle">Contact</div>
                       <div class="contentlefttext">
					<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Content Text
					</div>
                   </div>

                   <div class="contentrighth1">
                   	<div class="contentrighttitleh1">Recensies</div>
                       <div class="contentrightexth1">Test</div>
                   </div>

                   <div class="contentrighth2">
                   	<div class="contentrighttitleh2">Fotos</div>
                       <div class="contentrightexth2">
                       <a class="linkopacity" href="#"><img src="img/foto.png" width="275" height="140" border="0" /></a>	<br /><br />
                       <a class="linkopacity" href="#"><img src="img/foto.png" width="275" height="140" border="0" /></a>
                       </div>
                   </div>  






               </div>




    </div>   


<div id="footer">

   <div class="footerlinks">
                <a href="index.html">home</a> |
                <a href="info.html">fotos</a> |
                <a href="fotos.html">faq</a> |
                <a href="contact.html">contact</a>
   </div>



       <div class="footercopyright">
       © 2010 - rokain.com<br />
               </div>





</div>



</body>
</html>

I've changed this so that you have the right content inside one div added a clear after the floats,removed all the <br> from the html and used a top margin instead

 

You'll probably have to play around with the margins, padding to get it exactly how you want I just got it roughly

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="styles.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="container"> 
       <div id="topbar"></div> 
       <div id="header"></div> 


 <div class="menu"> 
                <a href="index.html">Home</a> 
                <a href="info.html">Informatie</a> 
                <a href="fotos.html">Fotos</a> 
                <a href="contact.html">Contact</a> 
  </div> 


                               <div id="maincontent"> 

                       <div class="contentlefth1"> 
                       <div class="contentlefttitle">Contact</div> 
                       <div class="contentlefttext"> 
                                               Content Text 
                                               </div> 
                   </div> 

                   <div class="contentrighth1"> <!--wrapped all rightcontent in this-->
                       <div class="contentrighttitleh1">Recensies</div> 
                       <div class="contentrightexth1">Test</div> 


                   <div class="contentrighth2"> 
                       <div class="contentrighttitleh2">Fotos</div> 
                       <div class="contentrightexth2"> 
                       <a class="linkopacity" href="#"><img src="http://rokain.com/img/foto.png" width="275" height="140" border="0" /></a>      <br /><br /> 
                       <a class="linkopacity" href="#"><img src="http://rokain.com/img/foto.png" width="275" height="140" border="0" /></a> 
                       </div> 
                   </div>   






               </div> <!--closed rightcontent wrap-->

        <div class="clr"></div><!--added a clear-->


    </div>    


<div id="footer"> 

   <div class="footerlinks"> 
                <a href="index.html">home</a> | 
                <a href="info.html">fotos</a> | 
                <a href="fotos.html">faq</a> | 
                <a href="contact.html">contact</a> 
   </div> 



       <div class="footercopyright"> 
       © 2010 - rokain.com<br /> 
               </div> 





</div> 



</body> 
</html>

 

 

* { 
padding:0; 
margin:0; 
outline:none; 
} 

html,body { 
font-family:Verdana, Geneva, sans-serif; 
color:#FFF; 
line-height:18px; 
outline:none; 
letter-spacing:0.0em; 
background:#333; 
} 

#container{ 
width:100%; 
height:auto; 
height:100%; /* voor IE */ 
min-height: 800px; 
} 

#topbar {width:100%; height:20px; background:url(http://rokain.com/img/topbar.png);} 
#header {width:874px; height:253px; background:url(http://rokain.com/img/header.png); margin-left:auto; margin-right:auto;} 

.menu {width:874px; height:67px; background:url(http://rokain.com/img/menubg.png); margin-left:auto; margin-right:auto;} 
.menu  a {color:#FFF; float:left; width:auto; margin-top:25px; margin-left:auto; padding-left:54px; text-decoration:none; font-size:18px;} 
.menu  a:hover {color:#CCC; float:left; width:auto; margin-top:25px; margin-left:auto; padding-left:54px; text-decoration:none; font-size:18px;} 


#maincontent {width:872px;background:url(http://rokain.com/img/contentbg.png); margin-left:auto; margin-right:auto;} /*removed heights*/
.contentlefth1 {float:left; width:562px;background:#232323; margin-top:35px; } /*removed height*/
.contentlefttitle {font-weight:bold; padding:9px 15px;background:#303030; }/*padding and background*/
.contentlefttext {font-size:12px; margin-left:15px; margin-top:655px;} /*added top margin instead of all the <br> in html*/


.contentrighth1 {float:right; width:306px;margin-top:35px;} /*removed height change margin*/
.contentrighttitleh1 {font-weight:bold; padding:9px 15px;background:#303030;} /*padding and background*/
.contentrightexth1 {font-size:12px; margin-left:15px; margin-top:40px;} 

.contentrighth2 {width:306px;margin-top:250px;} /*removed height changed margin*/
.contentrighttitleh2 {font-weight:bold; padding:9px 15px;background:#303030;} /*padding and background*/

.contentrightexth2 {font-weight:bold; margin-left:15px; margin-top:15px;} /*margin*/

.clr { clear:both; } 


a.linkopacity img { 
filter:alpha(opacity=50); 
-moz-opacity: 0.5;  
opacity: 0.5; 
-khtml-opacity: 0.5; 
decoration:none; 
} 

a.linkopacity:hover img { 
filter:alpha(opacity=100);  
-moz-opacity: 1.0;  
opacity: 1.0; 
-khtml-opacity: 1.0; } 



#footer {width:100%; height:138px; background:url(http://rokain.com/img/footer.png); margin-top:50px;} 
.footerlinks {float:right; width:210px; margin-top:69px; margin-right:30px;} 
.footerlinks a {color:#FFF; text-decoration:none; font-size:14px;} 
.footerlinks a:hover {color:#CCC; text-decoration:none;} 
.footercopyright {float:left; width:235px; color:#1a1a1a; font-size:12px; margin-top:80px; margin-left:20px}

  • Author

Thanks a a lot mteam!

That's exactly how I want it to work.

 

Thanks again ^_^

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.