css - width / height problem

steffn

02-20-2008, 12:55 PM

Hi, I have been going insane on a little problem I am having with a design I am trying to put together.
I have a box made out of two divs (in order to give the box two set of borders)
which in turn has two divs in it for content and a header. These inner boxes are set to Width: / Height: 100% but are still larger than the parent divs...

I think it might be easier to see what I am talking about rather than reading my not-so-good explanation of it.

http://www.steffeno.net/temp/test.html

code below:
<html>
<head>
<style type="text/css">

body {
margin:0px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
color:#fff;
background-color:#1a242d;
}

#c1c {
position:absolute;
top:100px;
left:721px;
width:283px;
height:245px;
padding:0px;
border:1px solid #010409;
}

#greyborder {
width:100%;
height:100%;
background-color: #29333c;
border:1px solid #58606b;
}

#title {
margin:5px 5px 5px 5px;
width:100%;
height:22px;
padding:0px;
background: url(http:www.steffeno.net/temp/headerdots.gif);
}

#boxcontent
{
z-index:1000;
text-align: left;
width: 100%;
padding: 0px 5px 0px 5px;
height:100%;
background-color: #3C18A5;
margin:0px 0px 0px 0px;
}
</style>
</head>

<body>
<div id="c1c">
<div id="greyborder">
<div id="title"><img src="http:www.steffeno.net/temp/recentposts.gif" alt=""></img></div>

<div id="boxcontent"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ullamcorper justo vel ligula. Morbi imperdiet sapien sed augue. Cras sed neque. Ut nisl lorem, sagittis at, malesuada sed, fringilla sed, nibh. Morbi orci metus, porta id, condimentum nec, facilisis vel, justo. Nullam interdum arcu in arcu. In elementum. Nunc in est a arcu adipiscing ornare. Morbi ultrices magna id nibh. Ut massa. Suspendisse condimentum nunc vitae mauris. Vivamus nec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p></div>
</div>
</div>

</body>
</html>

Any help on this would be very much appreciated!!

thanks

effpeetee

02-20-2008, 01:03 PM

Try adding this.

Frank

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

body,html {width:100%
height:100%;}[/B]

body {
margin:0px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
color:#fff;
background-color:#1a242d;
}
#c1c {
position:absolute;
top:100px;
left:721px;
width:283px;
height:245px;
padding:0px;
border:1px solid #010409;
}

steffn

02-20-2008, 01:40 PM

Thanks, but I'm afraid that didn't help.

effpeetee

02-20-2008, 01:58 PM

http://www.codingforums.com/showthread.php?t=132332

Have a look at this. It may help. I had a similar problem some time ago. I was making divs withh percentage widths/heights without setting the base size. If you don't set the html and body size first, the div will take 100% to mean the whole screen.

Frank.

steffn

02-21-2008, 08:34 PM

Thanks again, I have to admit I didn't get all that smarter on the problem, but I moved the title div inside the contentbox which fixed the problem of the contentbox going too far down, but what I want is a [content]box that takes up the remaining space below the title div. And if I start giving the contentbox any padding, it all goes to hell.

Now I gave the title a 5px padding to the top and left, that makes it stick out of its parent by 5px on the right side.
Basically I want to be able to make something 100% of its parent but I still want to pad it - but that padding has to deduct from the 100% not add to it. If that makes any sense.

I am sort of new to css, and it is sort of confusing. So any help is again very much appreciated. :)

http://www.steffeno.net/temp/test2.html
<html>
<head>
<style type="text/css">
*{margin:0;
padding:0;}

body,html {width:100%
height:100%;}

body {
margin:0px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
color:#fff;
background-color:#1a242d;
}
#c1c {
position:absolute;
top:100px;
left:721px;
width:283px;
height:245px;
padding:0px;
border:1px solid #010409;
}

#greyborder {
width:100%;
height:100%;
background-color: #29333c;
border:1px solid #58606b;
}

#title {
margin:-50px 0px 0px 0px;
width:100%;
height:22px;
padding:5px 0px 0px 5px;
background: url(http://www.steffeno.net/temp/headerdots.gif);
}

#boxcontent
{
z-index:1000;
text-align: left;
width: 100%;
padding: 0px;
height:100%;
background-color: #3C18A5;
margin:50px 0px 0px 0px;
}
</style>
</head>

<body>
<div id="c1c">
<div id="greyborder">

<div id="boxcontent"><div id="title"><img src="http://www.steffeno.net/temp/recentposts.gif" alt=""></img></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ullamcorper justo vel ligula. Morbi imperdiet sapien sed augue. Cras sed neque. Ut nisl lorem, sagittis at, malesuada sed, fringilla sed, nibh. Morbi orci metus, porta id, condimentum nec, facilisis vel, justo. Nullam interdum arcu in arcu. In elementum. Nunc in est a arcu adipiscing ornare. Morbi ultrices magna id nibh. Ut massa. Suspendisse condimentum nunc vitae mauris. Vivamus nec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p></div>
</div>
</div>

</body>

</html>

effpeetee

02-22-2008, 12:45 PM

body,html {width:100%;height:100%;}

You have a semi-colon missing here. and most important , you do not have a DOCTYPE as the first line of your code.

Try that for a start.

This will prove interesting I think.

http://codepunk.hardwar.org.uk/acss.htm

also

http://codepunk.hardwar.org.uk/acss02.htm

Frank

steffn

02-26-2008, 03:04 PM

I appreciate your help, I really do, but I'm getting nowhere. Adding a semicolon and a Doctype didn't change a thing.

abduraooft

02-26-2008, 03:09 PM

#boxcontent {test.html (line 37)
background-color:#3C18A5;
height:100%;
margin:0px;
/*padding:0px 5px;*/
text-align:left;
width:100%;
z-index:1000;
}

steffn

10-30-2009, 06:58 PM

Issue resolved.
I can not locate the links to delete this thread, could a moderator please do it for me, or edit out the urls in my posts?

Thank you in advance.