Coding Help

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?

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!

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

eft;") 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

eft} 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>

Thread: Coding Help

Thread Tools

Coding Help

Posting Permissions