-
Coding Help
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?
HTML Code:
<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
-
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 :)
Code:
<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>
