Hi gang,
You all should remember me after turning me against tables and into a
CSS junky... lol
Well, based on an example I was given by Lchad I beleive.
I have been developing a simple
css layout.
What I have done is visable in the image below:
This is only a mock up using quick graphics to give me a something visual I can see to work on.
The image above looks okay but watch what happens when the paragraph tags are used in the content area:
The
html code for that section is here:
- Code: Select all
<div id="sidebar">
<div id="top_left_box"></div>
<div id="center_content_box">
<p>This is content box Left..</p>
<p> </p>
</div>
<div id="bottom_left_box"></div>
</div>
The
CSS that controls it is here:
- Code: Select all
/* SIDE BAR OR CONTENT BOX 1 */
#sidebar {
float: left;
width: 260px; /* real width: 280px; */
padding-top: 7px;
padding-bottom: 7px;
padding-left:5px;
}
/* START OF BACKGROUND BOX 1 GRAPHICS */
#top_left_box{
height: 32px;
background-image: url(../images/left-box_top.gif); background-repeat: no-repeat; background-position: left;
}
#center_content_box{
height: auto;
background-image: url(../images/left-box_center.gif); background-repeat: repeat-y; background-position: left;
padding-left: 20px;
padding-right:20px;
}
#bottom_left_box{
height: 34px;
background-image: url(../images/left-box_bottom.gif); background-repeat: no-repeat; background-position: left;
}
/* END OF BOX GRAPHICS */
/* END OF SIDEBAR */
If I use the <br /> tags I dont get a problem with the images breaking appart.
Can any one help or advise please.
Thanks
Problem with css content box made from divs and background images
Aug 9th, 2007, 21:42
Similar Threads
