Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css - width / height problem

    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:
    Code:
    <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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try adding this.

    Frank

    [CODE]*{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;
    }[/CODE]
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but I'm afraid that didn't help.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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&#37; to mean the whole screen.

    Frank.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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&#37; 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
    Code:
    <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>
    Last edited by steffn; 02-21-2008 at 08:36 PM. Reason: forgot URL

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Code:
    body,html {width:100&#37;;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
    Last edited by effpeetee; 02-22-2008 at 01:22 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I appreciate your help, I really do, but I'm getting nowhere. Adding a semicolon and a Doctype didn't change a thing.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    #boxcontent {test.html (line 37)
    background-color:#3C18A5;
    height:100&#37;;
    margin:0px;
    /*padding:0px 5px;*/
    text-align:left;
    width:100%;
    z-index:1000;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •