CSS - From Tables Layouts To <div>

I've been thinking about switching over to making table-less css layouts, but there's been a few things holding me back, as I'm not sure if they're possible.

Firstly, can you have two fixed width divs on the sides of a variable width div, which will stretch to fit the screen? Something like this is generally what I mean:

Code:

<div style="width: 50px; float: left;">left</div>
<div style="width: *; float: left;">middle</div>
<div style="width: 50px; float: left;">right</div>

Also, is there any way to make a div that has been placed to the right of another match the height of the the one to it's left? Basically, I want it to behave more like standard tables do in that every cell in a row is the same height. Is this possible?

I think it would answer a lot of questions if we make a list of cross browser css layouts.

I am going to post all of my submissions via http://www.blendedcodes.com so everyone can see a live demo and change the code around live. Please post your submissions via blendedcodes.com or a similar site that lets visitors interact with the code. This is all about everyone learning the css layouts... I'll compile them all and post the final list when I close the thread.

Centered body with left and right columns
http://www.blendedcodes.com/DTrzZ6In

Table made of floating divs
http://www.blendedcodes.com/CFwtV3S1

This is driving me absolutely insane.
The transition from table designs to css designs is a brutal one, in case no one is aware. Table designs seem so much easier, but I guess I might as well be compliant.

Here's my problem:
All I need to do is have a three column box that has a select box in the left column, then two images vertically aligned in the middle within the middle column, and a second select box in the right column.

This would be incredibly easy with tables seeing that all I would need is:
Code:

<table>
   <tr>
      <td align="left">
         <select>
            <option>Option</option>
         </select>
      </td>
      <td valign="middle" align="center">
         <img src="picture1.jpg"/><br/>
         <img src="picture1.jpg"/>
      </td>
      <td align="left">
         <select>
            <option>Option 2</option>
         </select>
      </td>
   </tr>
</table>

I'm assuming that since it's this easy to do with tables and everyone is opposed to using tables for design, there must be an easier way using divs and the like. Please enlighten me, someone!

I've got two pages, one created using tables for layout, and one using css .

With the text columns in the tables layout, as you can see, no matter how much text you put in either column, the grey-background container will be pushed down.

However, with the text columns in the css layout, I had to float the right column to the right in order to display the two columns together, and therefore, if you have more text in the right floated column, adding more or less text does not push down the height of the grey-background container.

Can anyone tell me how I can fix this while allowing for random amounts of text to be displayed in either column, in the layout?

Hi there,

I wanted to make buttons for my menu but I didn't want to use a lot of bandwidth so I decided to use Layouts and use the same image button over and over again! I made it in FrontPage with a great success but at the end I found out that the layout doesn't work in FireFox, the writing is all over the place in FireFox.

Here is the code:
Code:

<div id="logo" style="position:absolute; left:-1px; top:20px; width: 171px; height: 45px;">

<p align="center"><font face="Tahoma" size="2">TEST LAYOUT</font></div>
<p>
<img border="0" id="img1" src="../button22.jpg" height="30" width="150" alt=""></p>

If you apply it in IE it works, but if you apply it in Firefox it doesn't work.

Thanks in advance for your help and support.

Best Regards,
John

I am looking for a CSS tutorial which teaches how to make a layout like this
layout
Basically a 3 column layout with boxes in the left and right columns
Thanks

I'm having an issue with a CSS layout I"m working on.
1.For some off reason the div element for my page footer appears to think its inside of the mbox div.
no matter what I have tried I can't get the pagebot div to the bottom of browser.
2. Width of 100% still leaves 30 or so px's on the right, any reason for this?
3. setting a min-height of 500 or so for mbox or innerbox divs has been ignored.
Code:

<html>
<head>
	<title>Untitled</title>
	<style>
	#container {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
	#pagetop{
		position: relative;
		top: 0px;
		background-color: #ADD8E6;
		width: 100%;
		height: 65px;
	}
	#pagebot {
		position: relative;
		background-color: #ADD8E6;
		height: 65px;
		clear: both;
	}
	#mbox {
		position: relative;
		border: 5px solid #000;
	}
	#innerbox {
		position: relative;
		left: 10px;
	}
	div{
		border: 1px solid red;
	}
	</style>
</head>
<body>
<div id="container">
	<div id="pagetop"></div>
	<div id="mbox">
		<div><img src='imgs/logo_tot_grey.jpg' width='280' height='95' alt='' border='0'></div>
		<div id="innerbox">
			<p>Test</p>
		</div
	</div>
	<div id="pagebot"></div>
</div>
</body>
</html>

hey everyone, for years i have been making sites with tables for layouts. i have heard how this is old and a bad method as opposed to css. i do know the basic of css, like changing fonts, properties of buttons, changing link styles, hovering, etc. i was wondering if anyone could reccomend a site that does a good job explaining how to make a layout with css, basically that can replace tables.
i have googled and found some ok stuff, but i was wondering if anyone already knows of a helpful resource. i am not in a dire need of an answer here, just curious to expand my knowledge of css. thanks for your help, --c0ldshadow

So here is my question and dilemma.

In almost every design you want the same layout for all the pages so one css style sheet is really all that is needed unless you are providing a different browser support or a different media option. However, lets say inside that site you want a page that will have a photo gallery or embedded videos. So then you may need to lay out a bit of a different layout for that page and its content. Is it better to just have those declarations in the same external style sheet, then applying it to that one page; or should it be placed in a separate css style sheet just for the page or because it is so isolates should it be placed in the xhtml internally? I would think placing in in the xhtml would not be a good idea but the other two options is bit more gray

LB

Alright, so ive been around the block for a while and have heard that table layouts for design are the worst thing possible.

However, I have noticed more and more sites using tables for the block type layout in a site... and then using css within the table blocks. I tried it out on a site I'm working on, and it is honestly the easiest way I've ever made a template... and it works in IE6 & 7, and FF.

One of my favorite sites and layouts is CBSSports. And they use a table layout to accomplish what they are doing.

Any reasons on why it is really that bad to do for example, what CBSSports is doing?

Is it more common practice to place all div's within one div as seen he


Or to have all div's independent, as shown he

I am sooooo annoyed with this!

I have designed all of my pages with the same template however 2 of my pages seem to be roughly 10 pixels wider even though they all have a width of 940 pixels.

www . toolboxstrategies . com/test/brauer

Pages: Home, Communities & The Brauer Way are perfect but pages Our Region and Contact seem to be slightly wider than the rest..

How can that be when my header, body and footer all have a width of 940px?

Tried to fix this for HOURS but I can't figure out what is causing it!

Thank you!!!!!!

I cut my teeth on css1 and tables years ago. I am creating a sophisticated and very graphical web site. So, I have spent the last week reading all I can find on using CSS alone to do the layout and am convinced by the many good arguments to not use tables. Although I have found good resources I still cannot get the following two layouts to work cross-browser (IE6+, Mozilla 1.6+) using CSS alone (hacks or not, don't care) nor have I found examples or explanations that lead me to believe they are possible. I want to be wrong, however I suspect no one will be able to achieve these common, although somewhat complex layouts, using CSS-P alone. Can you do it? I really hope so. Any help is greatly appreciated.

Rule #1: each layout must work whether the parent is the body or the layout is nested inside of another div

Rule #2: using the argument that the layout is either undesireable or inappropriate for the web does not constitute success

NOTE: I'm a new subscriber and am prohibited from posting URLS so I've had to put a comma instead of a dot in the base url. Just cut and paste them and replace the commas with dots.

Layout 1

http://www,scotthawker,com/images/2007/bxg/simplelayout.png

I have a parent container (body or div) that needs to have three regions inside of it: header, content and footer. All three regions take 100% of the width of their parent container, even if the parent conainer is resized.

The header region is anchored to the top and has a specified height (lets say 50px). The footer region is anchored to the very bottom of the parent container and also has a specified height (again 50px). The content region takes all vertical space of the parent container not used by the header and footer regions. So, in this example the content region's height is <parent container height> - 50px - 50px. That's it.

Layout 2

http://www,scotthawker,com/images/2007/bxg/complexlayout.png

This layout is identical to the first. The difference is that inside each of the three regions there are additional numbered regions:

Header Region: Region1 has a specified width and height (25px by 25px). It remains at the left-most position of the header region. Region3 remains the right-most position of the header region also with a specified width and height (25px by 25px). Region2 takes up all the horizontal space between Region1 and Region3 and so its width in this case is <header region width> - 25px - 25px.

Content Region: Contains three regions (4,5,6) all of which assume the height of its parent the content region. Region4 has a specified width (10px) and remains at the left-most position of the content region. Region6 remains the right-most position of the content region also with a specified width (10px). Region5 takes up all the horizontal space between Region4 and Region6 and so its width in this case is <content region width> - 10px - 10px.

Footer Region: Region7 has a specified width and height (45px by 45px). It remains at the left-most position of the footer region. Region9 remains the right-most position of the footer region also with a specified width and height (45px by 45px). Region8 takes up all the horizontal space between Region7 and Region9 and so its width in this case is <footer region width> - 45px - 45px.