CSS All-Expandable Box help needed

HTML & CSS
1

Hi all Ive been following the example to create an all expandable box (http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/) but I seem to be doing something wrong as my box seems to be coming out wrong,
I’m trying to create a content box that sits next to the left menu and only expands vertically , I wanted Horizontally to stay at about 70% (if possible) I will include some screen shots to try explain what I’m trying to do.

The box in this image stops where I want it to but dose not begin on the left even though the text does.

http://datenthielt.no-ip.org:8080/WebDev/content.jpg

My CSS looks like this


.box {
  width: 100em;
}

.box div.topleft {
	display: block;
	background: url("Images/Content.jpg") top left no-repeat white;
	padding: 5.0em 0em 0em 5.0em;
}

.box div.topright {
	display: block;
	background: url("Images/Content.jpg") top right no-repeat white;
	padding: 5.0em;
	margin: -5.0em 0 0 5.0em;
}

.box div.bottomleft {
	display: block;
	height: 95px;
	margin-top: -5.0em;
	background: url("Images/Content.jpg") bottom left no-repeat white;
}

.box div.bottomright {
	display: block;
	background: url("Images/Content.jpg") bottom right no-repeat white;
	height: 95px;
	margin-left: 6.0em;
}

And my HTML looks like this


<div class="box">
  <div class="topleft">
  <div class="topright">
    <div>
       CONTENT GOES HERE
       <br />o hys
       <br />it does
       <br />jaja
    </div>
  </div>

Any help would be greatly appreciated, Thank you :slight_smile:

2

Ahh that worked, I set the .box class to float left and its working correctly :smiley: brilliant. Thank you Paul.

3

Ok, I think ive found the main problem. My navigation bar is set to float so the main content box was going underneath it. When I remove the float on the navigation bar the main content bar sits underneath it, Should I try float the main content to the left of the navigation bar?

4

HI,

It seems t work with your image and my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
    font-size: 62.5&#37;;
    font-family: Helvetica, sans-serif;
    background: url(images/stripe.png) repeat;
}
p{margin:0 0 1em}
.box {
    width:70%;
    max-width:700px;/* depends on size of image used*/
    max-height:500px;/* depends on size of image used */
    min-width:400px;
}
.box div.topleft {
    background: url("http://datenthielt.no-ip.org:8080/WebDev/background.jpg") top left no-repeat white;
    padding: 2.0em 0em 0em 2.0em;
}
.box div.topright {
    background: url("http://datenthielt.no-ip.org:8080/WebDev/background.jpg") top right no-repeat white;
    padding: 2.0em;
    margin: -2.0em 0 0 2.0em;
}
.box div.bottomleft {
    margin-top: -2.0em;
    background: url("http://datenthielt.no-ip.org:8080/WebDev/background.jpg") bottom left no-repeat white;
    height:95px;
}
.box div.bottomright {
    background: url("http://datenthielt.no-ip.org:8080/WebDev/background.jpg") bottom right no-repeat white;
    margin-left: 3.0em;
    height:95px;
}
.content {
    margin-left:-4em
}
</style>
</head>
<body>
<div class="box">
    <div class="topleft">
        <div class="topright">
            <div class="content">
                <p>CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE</p>
            </div>
        </div>
    </div>
    <div class="bottomleft">
        <div class="bottomright"> </div>
    </div>
</div>
</body>
</html>

The only thing I would do is remove that red box and just have it as an internal element instead as it complicates the mark up too much.

5

Thank you Paul, It looks like I’m definitely closer now , I think my problem is my background image is not just a rounded shadow box. So far its looking better but not displaying the left side of the image now.

the site looks like this now
http://datenthielt.no-ip.org:8080/WebDev/newcontent.jpg

The background image I’m using looks like this
http://datenthielt.no-ip.org:8080/WebDev/background.jpg

6

Hi,

You have to make sure that the image you are using is wide enough to accommodate the screen sizes that you need.

Here is your example using one of my old images which is 1000px wide by 5000px high.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
    font-size: 62.5&#37;;
    font-family: Helvetica, sans-serif;
    background: url(images/stripe.png) repeat;
}
p{margin:0 0 1em}
.box {
    width:70%;
    max-width:1000px;/* depends on size of image used*/
    max-height:5000px;/* depends on size of image used */
    min-width:400px;
}
.box div.topleft {
    background: url("http://www.pmob.co.uk/temp/images/eric-shadow.png") top left no-repeat white;
    padding: 2.0em 0em 0em 2.0em;
}
.box div.topright {
    background: url("http://www.pmob.co.uk/temp/images/eric-shadow.png") top right no-repeat white;
    padding: 2.0em;
    margin: -2.0em 0 0 2.0em;
}
.box div.bottomleft {
    margin-top: -2.0em;
    background: url("http://www.pmob.co.uk/temp/images/eric-shadow.png") bottom left no-repeat white;
    height:95px;
}
.box div.bottomright {
    background: url("http://www.pmob.co.uk/temp/images/eric-shadow.png") bottom right no-repeat white;
    margin-left: 3.0em;
    height:95px;
}
.content {
    margin-left:-4em
}
</style>
</head>
<body>
<div class="box">
    <div class="topleft">
        <div class="topright">
            <div class="content">
                <p>CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE</p>
            </div>
        </div>
    </div>
    <div class="bottomleft">
        <div class="bottomright"> </div>
    </div>
</div>
</body>
</html>

I’m not sure why you had so much padding as you only need to offset the shadows etc. In your example you had little room left for content although you could have dragged the content back with a negative margin.