In CSS, how do you make content go into 2 columns without making a table?

Question

I would use a table, but it messes up the rest of my CSS and makes the black border disappear. I've tried div class' and id's, float right and left, but nothing makes my block of text go the other side of the first line of text.
heres what I have so far on my CSS: If sidebar is the left column..
div#sidebar {
display:inline;
float:left;
width:180px;
padding:1px;
margin-top: 15px;
color:#000000;
font-family:Arial;
background-color:#ffffff;
}
..and main is the right...
div#main {
display:block;
align: right
float:right;
width:720px;
padding:1px;
margin-top: 15px;
color:#000000;
font-family:Arial;
background-color:#ffffff;
}
then what am I doing wrong?

Answer 1

First off, you need to put your all of your content into a containing div (called a "wrapper") so that their widths are restricted to the width of that wrapper rather than to the width of the users' computer screen. You can make the wrapper be 100% and it will take up 100% of the computer screen. Or you can set the wrapper to be a certain pixel width, but make sure the wrapper's width is considerably wider than the sum of your two columns that will be inside of it.



Here's the CSS:



body {

margin:0;

padding:0;

background:#fff;

color:#000;

font-family: Arial, Helvetica, Verdana, sans-serif;

}



#wrap {

background:#fff;

margin:0 auto;

width:950px;

}



#contentContainer {

width: 100%;

margin: 0px;

}



#main {

background:#fff;

float:right;

width:720px;

}



#main p {

padding: 1px;

margin: 0;

}



#sidebar {

background:#fff;

float:left;

width:180px;

}



#sidebar p {

padding:0 0 0 10px;

}



And here is the XHTML mark-up:

Left Sidebar Content

Main Content, right column

Adjust the sizes, widths, colors and fonts accordingly.



PLEASE NOTE: It's good practice to NOT put paddings, fonts and margin assignments on your left and right column divs. As a general rule, define the font styles separately from the divs, and put margins and paddings on the font elements. See how I defined the paragraph styles for each of the columns in the example markup above?

Answer 2

What you're asking to do could be very complicated, and take two times as lots code as only applying tables, even although, i ought to grant you yet another nifty piece of code, it somewhat is CSS, yet will paintings with any tag, like

's and tables and td's etc. that code is form="visibility: hidden;" and it will poof away that area of code from being seen, unsure if it is going to eliminate the code like the spacing. So enable's restoration that, on your code, around what you do no longer opt for, positioned this: so say you opt to disguise a paragraph.. And POOF! it somewhat is all long gone! eliminate the and it somewhat is decrease back. it is paintings on something! What it does is tells the browser to no intemperate that, or coach it, you're including a remark into your code. wish that helps! And what code are you applying which you will in straightforward terms use DIVs?

Answer 3

Try putting your main element before the sidebar element in your markup. Also make sure the container is larger than 904 pixels. Remove the "display:inline" from the sidebar as well.

Answer 4

use span and not div.... also you could absolutely position the items...

i would use a table.

div left here

div right here

Answer 5

Could you be more pacicic? YOu want the text to go to the other sids as well, or what?