table question

Hello,

Tell me how to make this

<table><td>first column</td><td>second column</td></table>

Code (markup):

using divs

 

You don't. divs are not replacements for tables but if you are just trying to create a two column page, just Google for two column layout for hundreds of examples.

 

Yes, A google search will throw hundreds of result. There is one demo avaialble at my blog. Extract what you require from the code.

 

To do it with divs it becomes more of a CSS question. Divs will move to the next line if there isn't enough space so you have to set a width on the divs and a min-width somewhere to prevent them from moving to the next line if the window gets shrunk to small.

Basicly if you do this:

<div style="width:50%;"><div style="width:50%;">

Code (markup):

You will have two columns. Of course you will have to adjust that if you start adding margins and borders.

 

Wrong! And where are the closing tags?

 

You're right I forgot to add the float

OK here's your correction:

<div style="float:left;width:40%;background-color:#c4f6f8;">some text goes here</div>

<div style="float:left;width:40%;background-color:#f8f1c4">some text goes here</div>

Code (markup):

This will give you two columns and as noted before if you start adding margins and borders youmay have to adjust your width value.

I also added a background color just so you could see it when you test it in a browser.

 

Thanks man, finally someone with useful answer

 

@ronc0011, Great. Thanks for the correction.
@OP, Clear the floats when you have next element.

 

You should Google "CSS float" and read up on floats because they have specific rules associated with them. For instance if the space becomes less than the defined width of the divs they will push the last div to the next line. Typically you control this by putting the whole thing into a "wrapper" div that has a "min-width" value set for it thus preventing the width of the document from getting smaller than the combined widths of your divs. Also when determining combined width of your divs you have to allow for borders and margins. When using "floats" all width values must be in "%". min-width values can be in pixels "px".

 

Also because that make really messy code you might want to use an external style sheet. Just creat a txt file and change the .txt extension to .css. Give it a name i.e. "site.css"

define your styles as classes
Note: Classes are designated by a "." at the beginning.

.leftColumn
                       {
                         float:left;
                         width:45%;
                        background-color:Red;
                       }

.rightColumn
                       {
                         float:left;
                         width:45%;
                        background-color:Green;
                       }

Code (markup):

You tell your html page where to find the styles by adding this line to the head section of the document:

<link href="site.css" rel="stylesheet" type="text/css" />

Code (markup):

Then you create your div tags like so:

<div class="leftColumn">Some stuff goes here</div>
<div class="rightColumn">Some stuff goes here</div>

Code (markup):

Another advantage to this is that you can make changes in one central location. You can also define other things spacific to a particular class. For instance if you wanted a list in your left column and it needed to be different than list elsewhere in the document you would create a style just for list in the left column like so:

.leftColumn ul
                           {
                              margin-left:20px; 
                           }


.leftColumn ul li
                           {
                              margin-left:20px;
                              font-family:Tahoma;
                              font-size:12px;
                              color:Black; 
                           }

Code (markup):

 

This question is more about CSS, buddy answering this question would be a difficult one. According your question, CSS gonna play a important role. I can't write the full code but I have searched a site which will help you a lot.

Here is a sample code, hope that it will help you

pixel2life.com/publish/tutorials/33/converting_tables_to_a_css_div_tag_and_xhtml_validated_layout/

visit this page and your problem will be gone.