Three columns webpage

[philips]

Hi there,

I am trying to come up with webpage design similar to the following webpage but without the comment area and the footer: http://www.thedailybeast.com/article...obref=obinsite

I like to have a liner that separates the area where the article is written from the right side area.

Any help is greatly appreciated.

[philips]

Anyone can tell me what it takes to make a line similar to the grey line that runs after "US POLITICS"

http://www.thedailybeast.com/article...-campaign.html

Is it CSS or an image??

[philips]

Just a quick question: I have a website that I have built using tables and cells in MS FP 2003. Now... one of the cells has a size of 861 x 23 how much does this equal in pixels (??) for the purposes of CSS? Is there a rule I can follow so I don't have to ask such basic questions in the future?

I am planning to re-do this website in CSS. Thanks.

[CChawps]

Hey,

DD got some templates for a three columns layout here:
http://www.dynamicdrive.com/style/layouts/category/C10/

As for the border I would just add a line beneath my header in photoshop. However you could also add borders in CSS:
http://www.w3schools.com/css/css_border.asp

I have never touched frontpage before, so I know nothing about that... But I usually just keep it simple and use percentages and pixels for the units. But ehh, 861 x 23, is cm, inches or which unit??

Regards Toby

[philips]

Hi Toby,

Thanks for your feedback. I am trying to create a webpage that is similar in design to the following: http://www.thedailybeast.com/article...-campaign.html

However I like to have a separating line on the right side and no comment area or the black footer area.

[CChawps]

I'm a little unsure of exactly where you want the seperate liner.

CODE

<style type="text/css">
#wrap {
	margin: 0 auto;
	width: 797px;
}

#topb {
	background: #FFF;
	width: 797px;
	height: 60px;
	border-bottom: 3px solid #666;
}

#topb h1 {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 50px;
	font-weight: normal;
	text-align: center;
}

#leftb {
	background: #EEE;
	width: 169px;
	float: left;
	padding: 4px;
}

#middleb {
	background: #FFF;
	width: 432px;
	float: left;
	padding: 4px;
}

#rightb {
	background: #FFF;
	width: 169px;
	float: left;
	padding: 4px;
	border-left: 3px solid #666;
}
</style>

<div id="wrap">
    <div id="topb"><p><h1>HEADING</h1></p></div>
    <div id="leftb"></div>
    <div id="middleb"></div>
    <div id="rightb"></div>
</div>

IMAGE OF THE RESULT
WITH FILLER TEXT

[philips]

That's a good one. I find it quite interesting how a total CSS code with no html can render such a result!

[CChawps]

The code in my previous post does contain HTML. The stuff marked in pink is CSS, and the blue is HTML. But it may look wrong if you try to parse the whole code into a HTML document, because there is no content in the code I've giving you. I used (just for display) a DD javascript the paste random filler text into the three areas, so I could illustrate how it "would" look if you had some content.

By the way, are you creating a website?

Feel free too ask me if there's anything else I can help you with.

-Toby

[philips]

Hi Toby,

Now I understand...

Thank you very much for your kind offer....

Yes, I am trying to create a simple looking layout that is similar to the following but without the comment area and the black footer part:

http://www.thedailybeast.com/article...operation.html

On another note, is it the case that I would normally have to place the css code (the pink) in a separate style sheet? I know how to save it as css: I just save it in editor for example as index.css. The HTML code is in a separate editor document. A separate style sheet could then be shared by other pages.

[philips]

I am trying to cause the code you created to show the website in the center and it is showing to the left side....