3 column layout issue

hoponhiggo · March 11, 2013

Hi guys

Im trying to create a blank 3 column layout using some snippets of code ive found from a template, but i cant get it too work.

When viewing the design in dreamweaver, the text and styling in the left and right colum is not visible. Can anybody advise as to why?

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link href="style2.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>


</head>

<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>Title</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>20%</em></b>filltext</div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>15%</em></b>filltext</div>
</div>

<div id="footer">Footer</div>

</div>
</body>
</html>

CSS:

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}


#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 15% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 15%; /*Width of right column in pixels*/
; /*Set margin to that of -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px;
margin-top: 0;
}

Any help would be greatly appreciated....

Love2c0de · March 11, 2013

Good evening,

I have wrote this for you.

Is this what you want?

<html>
<head>
<style type="text/css">

html, body
{
    margin: 0px;
}

#main_container
{
    width: 80%;
    margin: auto;
}

#left_container
{
    width: 20%;
    height: 300px;
    background: green;
    float: left;
}

#right_container
{
    width: 20%;
    height: 300px;
    background: yellow;
    float: right;
}

#content_container
{
    background: blue;
    width: 60%;
    height: 300px;
    margin: auto;
}

#footer
{
    width: 100%;
    clear: both;
    height: 100px;
    background: pink;
}

</style>
</head>
<body>

<div id="main_container">
    <div id="left_container">
        left column
    </div>
    
    <div id="right_container">
        right column
    </div>
    
    <div id="content_container">
        main content
    </div>
    
    <div id="footer">
        footer
    </div>
    
</div>

all of these divs are within the 'main_container' div, adjust the width as needed.

</body>
</html>

Also don't use the bold HTML tag, it's deprecated. Style it in CSS instead, something like #left_container { font-weight: bold;} (being very generic there).....

Hope this helps,

Kind regards,

L2c.

cyberRobot · March 12, 2013

Also don't use the bold HTML tag, it's deprecated. Style it in CSS instead...

Has it been officially deprecated yet? I can't seem to find a record of it being depreciated in HTML 4 or 5.

However, I agree that it would be better to use CSS for this case.

Note that there are cases where extra emphasis needs to be placed on the text. To do that, you would use the tag:

https://developer.mozilla.org/en-US/docs/HTML/Element/strong

haku · March 23, 2013

I believe the tag is still valid, but the tag is preferred.

Sign In

3 column layout issue

Recommended Posts

hoponhiggo

Link to comment

Share on other sites

Love2c0de

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information