Coding Help [Archive]

lRhyss

27-05-2011, 12:30 PM

Ok, I am trying to learn how to code, I can do everything up to 2 column atm, and today I went for three.

I have the left and right columns working, but I can't get the center content box to center?

How could I do this?

<div style="float:left; width: 250px;"> <br />

<div id="purpletop"></div>

<div id="sidemid">test<BR /><BR /><BR />:)</div>

<div id="sidebot"></div><BR />

<div id="greentop"></div>

<div id="sidemid">test<BR /><BR /><BR />:)</div>

<div id="sidebot"></div><BR />

<div id="yellowtop"></div>

<div id="sidemid">test<BR /><BR /><BR />:)</div>

<div id="sidebot"></div><BR />

<div id="orangetop"></div>

<div id="sidemid">test<BR /><BR /><BR />:)</div>

<div id="sidebot"></div><BR />

</div>

<div id="mid">test<BR /><BR /></div>

<div style="float:right; width:250px;"> <br />

<div id="purpletop"></div>

<div id="sidemid">test<BR /><BR /><BR />:)</div>

<div id="sidebot"></div><BR />

<div id="greentop"></div>

<div id="sidemid">test<BR /><BR /><BR />:)</div>

<div id="sidebot"></div><BR />

<div id="yellowtop"></div>

<div id="sidemid">test<BR /><BR /><BR />:)</div>

<div id="sidebot"></div><BR />

<div id="orangetop"></div>

<div id="sidemid">test<BR /><BR /><BR />:)</div>

<div id="sidebot"></div><BR />

</div>

Thanks and +Rep to all that help! :D

Joe!

27-05-2011, 07:38 PM

I don't really understand what you're trying to do with that obscure amount of divs. Where possible you shouldn't really use inline styling (style="float:left;") etc, you should be styling in the head or better yet an external stylesheet.
I've whipped up a quick 3 column layout for you though.
Also, an id's should be unique. If you want a set of styles on multiple elements you should use classes (class="classname") and then to set that in the style you would .classname {float:left} for example.

Hope this helps and you can learn from it :)

<head>
<style type="text/css">
#container {
width: 100%;
}
#left {
width: 33%;
float:left;
}

#center {
width: 33%;
float:left;
}

#right {
width: 33%;
float:left;
}
</style>
</head>
<div id="container">
<div id="left">left</div>
<div id="center">middle</div>
<div id="right">right</div>
</div>