Forum Moderators: not2easy
I have some confusion in div structure i want to make table through div.
This topic also put earlier(http://www.webmasterworld.com/forum83/8626.htm) in this forum but its not working properly, problem is that i make this structure but i never expand vertically.
Here is my code please check it and reply me as soon as possible. i am waiting here for your kind reply. Thx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.wrapper {
width:808px;
border:1px #CCCCCC solid;
padding:3px;
}
.left_column {
width:147px;
float:left;
text-align:center;
border:1px #CCCCCC solid;
margin:1px;
}
.central-colunm {
width:300px;
float:left;
border:1px #CCCCCC solid;
margin:1px;
}
.right_column {
width:147px;
float:left;
text-align:center;
border:1px #CCCCCC solid;
margin:1px;
}
.col {
width:198px;
float:right;
text-align:center;
border:1px #CCCCCC solid;
margin:1px;
}
.spacer{
clear:both;
margin:0;
padding:0;
line-height:0px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left_column">stuff here</div>
<div align="center" class="central-colunm">stuff here</div>
<div class="right_column">stuff here</div>
<div class="col">Text Here</div>
<div class="left_column">stuff here</div>
<div align="center" class="central-colunm">stuff here</div>
<div class="right_column">stuff here</div>
<div class="col">Text Here</div>
<div class="left_column">stuff here</div>
<div align="center" class="central-colunm">stuff here</div>
<div class="right_column">stuff here</div>
<div class="col">Text Here</div>
<div class="spacer"></div>
</div>
</body>
</html>
I'm not really sure what it is that you are asking. It seems like you have the page set up as you wished for it to be.
I'm not really sure why you have the align="center" within the divs when you can just center your text with the CSS. If you wanted paragraphs, you could just center your text like this: p{text-align: center;}
Also, your embedded code was incorrect.
You have this: <style>
It should red like this: <style type="text/css">
What kind of information are you putting into the css div container that you created? If you are using some type of data, you should be using a table, if it is content for the page, then you should be using the divs and other css for the layout.
Forgive my confusion as I am not really sure what it is that you are trying to accomplish.
4~css~
I did see the code, and did fix the one error in it.
As you add content to your divs the divs will expand vertically. Right now you only have one line of text in the boxes.
And depending on the content that you wish to add, then each box is going to expand differently. You can add a height to them, however, if the content exceeds the height, then you are going to run into difficulty.
Maybe someone else can add some of their thought processes to this.
why make a table with divs? if it's a table you need then use the table element, that code sample looks like a table to me ;)
anyhow, in answer to your question, you can't make "same height" columns with floated divs unless you fake it by using something like "faux columns"
in short CSS should only really be used if you want to replace table for layout, and even then it's still a choice, it should not be used to replicate an actual table, andf trying to make it do so is likely going to lead to heartache (i.e. there is no easy answer, only fakes or workarounds) until one of the CSS Layout Modules are supported
HTH and you might like to take a read of our TOS [webmasterworld.com] and our CSS charter [webmasterworld.com] in order to help you get the most from your time here at WebmasterWorld! :)
My opinion is by using tricks and hack you can create table but it won't work like table, like if one increment in the height of a div and width, also word-wrap etc...
