homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Blank Space Between Divs
I have a big right div and a small left div. There is a white space between
FrenchFrysable




msg:4238722
 4:41 pm on Dec 4, 2010 (gmt 0)

My page is something like this: One container set at 80% width and 10% margins on the right and left. Then within that div there is a wrap div. Within this is my right and left div. The right is bigger, 60% of the container. The left is smaller, 20%. I then have a footer div that is below all of the that, not nested within any other divs. The footer is 80% of the page with similar margins to the container. In between the left and right there is a white space that I don't want. It is re-sizable and shows up in Chrome, Firefox, and IE. See what you can do.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3.0,Transition=23)">
<meta name="created" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="">
<meta name="title" content="">

<link rel="icon" href="images/favicon.ico" type="image/ico" >
<link rel="shortcut icon" href="images/favicon.ico" type="image/ico" >
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<link rel="apple-touch-icon" href="images/customIcon.png"/>

</head>



<body>
<div class="container">
<div class="wrap"
<div class="content">
This is content
</div>
<div class="right">
Right Content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
<div class="footer">
Footer
<br />
</div>
</body>
</html>


CSS:

* {
padding:0;
margin:0;
border:0;
}

html {
}

body {
margin:0px;
background-color:green;
background-image: url('images/camo.png')
}

a.visited {
text-decoration:none;
color:grey;
}

a {
color:green;
text-decoration:underline;
}

.header {
width:80%;
height:auto;
background-repeat:repeat-x;
background-color:white;
text-align:center;
padding-bottom:10px;
}

.container {
width:80%;
margin-left:10%;
margin-right:10%;
overflow:auto;
background-color:white;
}

.content {
background-color:#E4E4E4;
border-bottom: 2px solid #E4E4E4;
border-right: 2px solid #E4E4E4;
width:60%;
color:#000;
min-width:20%;
}

.wrap {
width:100%;
clear:both;
}

.right {

height:100%;
width:20%;
background-color:grey;
color:#00000;
padding-top:25px;
}

.footer {
color:white;
background-image:url('footer.png');
margin:0 auto;
padding-top:10px;
padding-bottom:0px;
background-color:white;
font-size:90%;
text-align:center;
margin-left:auto;
margin-right:auto;
width:80%;
opacity:.75;
filter:alpha(opacity=75);
}







.note {
font-size:10pt;
}

/*Sets defaults for all browsers*/
h1 {
font-size:200%;margin-top:0px;font-weight:normal;
}

h2 {
font-size:160%;margin-top:10px;margin-bottom:10px;font-weight:normal;
}

h3 {
font-size:120%;font-weight:normal;
}

h4 {
font-size:100%;
}

h5 {
font-size:90%;
}

h6 {
font-size:80%;
}

h1,h2,h3,h4,h5,h6 {
background-color:transparent;
color:#000000;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address {
margin:1em 5%;
}

li, dd {
margin-left:5%; }

fieldset {
padding:.5em;
}

.arialStyle {
font-family:verdana,arial,sans-serif;
font-size:12px;
color:#000000;
margin:0;
padding:0;
}

.romanStyle {
font-family:georgia,"times new roman",serif;
font-size: 12px;
color:#000000;
margin:0;
padding:0;
}

 

londrum




msg:4238723
 4:56 pm on Dec 4, 2010 (gmt 0)

sounds like you've got the left and right divs adding up to 80%, when they should add up to 100%.

if the outer div is 80% with 10% margins, then the two divs inside should still add up to 100% -- it will just be 100% of the original 80%.

FrenchFrysable




msg:4238740
 6:20 pm on Dec 4, 2010 (gmt 0)

wow. I cant believe I even overlooked that. I'm dumb. Thanks.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved