Issue using CSS for surrounding box instead of table

I am sooo trying to get use to how to use CSS rather than tables. I hate how most of what I work on is table based and have 100 times more html code then is necessary! I really believe that tableless design, as much as possible, is the best route to go on the design front.

With that being said I am having issues with a surrounding box concept utilizing CSS and as little amount of html markup as possible.

Here is what the box looks like which it utilizing tables in html. I have used web developer add on to highlight the different table cells. First cell is image, second cell is background image so that text can show up, third cell on the top right is simply an image.

Then the second row is first cell is background image repeating on y axis, then content cell and then third cell is another background image repeating on y axis so that content cell can be as large as needed. Then bottom row of cells is basically just like the top row of cells. Makes perfect sense in my table driven brain.

When I go to attack this utilizing a tableless design I get mixed results, cannot get the right y axis background image to work, can’t get the top right image to display the same in firefox and internet explorer, etc. Here is a snippet of coding to see if I am doing this correctly.


    <div id="sidebarbox">
    	<div id="sidebarboxTop">
        	<img class="floatLeft" src="images/box_corner_left.gif" width="40" height="38" />HEADER
        </div>
   	    <div id="sidebarboxLeft">          
        	<div id="sidebarboxContent">
          		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat fringilla magna, et aliquam nulla viverra ac. Morbi lobortis convallis ipsum, in vehicula neque sagittis in. Mauris cursus lobortis nibh et tincidunt. Phasellus ut lacus fermentum mauris elementum ornare sit amet id justo. Sed enim lectus, tincidunt at tempus eget, condimentum sed neque.</p>         
        	</div>
        <div id="sidebarboxRight">
        </div>
        </div>  
    	<div id="sidebarboxBottom">
        	<img class="floatLeft" src="images/box_corner_footer_left.gif" width="41" height="29" />
        </div>              
    </div>



Here is the CSS:


#sidebarbox {
	width: 196px;
	margin-right: auto;
	margin-left: auto;
}
#sidebarboxTop {
	background-image: url(images/box_corner_center.gif);
	background-repeat: repeat-x;
	margin-right: auto;
	margin-left: auto;
	width: 196px;
	height: 38px;
}
#sidebarboxLeft {
	background-image: url(images/box_box_bg_l.gif);
	background-repeat: repeat-y;
	float: left;
	width: 183px;
}
#sidebarboxContent {
	background-color: #FFFFFF;
	margin-left: 18px;
}
#sidebarboxRight {
	background-image: url(images/box_box_bg_r.gif);
	background-repeat: repeat-y;
}
#sidebarboxBottom {
	background-image: url(images/box_corner_footer_middle.gif);
	background-repeat: repeat-x;
	width: 196px;
	margin-right: auto;
	margin-left: auto;
	height: 29px;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}

Here is the outcome of what i’ve done. You can probably see why I am frustrated.

I realize that this isnt complete, but i’ve got fed up with the outcome being different on FF and IE. I also believe i’m using too much html markup coding to accomplish this. I’m just so stuck on table cells and not sure on how to implement this because when i think of how to do this without tables, i end up thinking “for every cell there needs to be a div to completely control the look/feel”

Help please!

The way I would go about it is to have one <div> for the whole lot, with a grey background. Then, within that, you would need to have two empty <div>s for the top graphics (or one, which could contain the header, if it’s fixed width) - ie, the white corner on a transparent/grey background and the white arrow likewise. Then create a <p> for the main content with a white background.

That will give you much simpler code, and make it much more appropriate, and easier to understand and maintain!

This is specific to your issue, but hopefully you will see the fundamentals behind the solution…

  1. you a fixed with sidebarbox… which simplifies the problem considerably. Essentially it leaves you with 3 images you need to have and place: a top, a bottom and a center. The latter will repeat vertically and as such should be behind all other images an content.

  2. So believe it or not all you need as far as mark up is this:


<div id="sidebarBox">
   <h2 class="top">Header</h2>
   <div class="sideContent">
      <p>your content goes here</p>
   </div>
</div>

Now you have to chop up that box design into 3 tiles. you can make the center tile only a few pixels high since it’s going to repeat vertically anyway. And since the box has a simple bottom the bottom tile should be too high either… so for the sake of argument:

box_top.jpg is :196px x 40px
box_middle.jpg is :196px x 3px
box_bottom.jpg is :196px x 10px

  1. the CSS

#sidebarBox {width: 196px; background: url(images/box_middle.jpg) repeat-y}
#sidebarBox  .top{ background: url(images/box_top.jpg) no-repeat left top ; margin:0 ; padding:10px 40px; }
#sidebarBox  .sideContent{ background: url(images/box_bottom.jpg) no-repeat left bottom ;  padding-bottom:10px; }/*set padding-bottom to AT LEAST 20px*/

and that should get you there!

NOTE:since you have a fixed width you could use a SPIRTE method , that is one image instead of 3 … but lets keep this lesson basic for now, OK ?

Brillient. Why did I not think of doing it this simply? Atleast I knew that my markup was way too much for what needed to be accomplished.

Very nice, thank you. And it makes so much more sense.