Member Avatar for sethbaur

Hi I'm trying to make a portfolio website and I'm having some issues with the layout. What I'm having trouble with is using divs and having background colors extend the edges of the browser. I'm having a hard time explaining what I mean so here is an image of what I want it to look like: http://www.domusludorum.com/seth/sethport.jpg.

You can see that the background extends left and right to the edges for each section, and the content is centered. When I use divs, no matter what I do there is a margin. Any ideas on how I can achieve what I want?

  • 4 Contributors
  • 10 Replies
  • 119 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by sethbaur
Member Avatar for plgriffith

That looks like a template you got off the web. I guess it's not really my place to say, but shouldn't a web developer develop his own website?

Member Avatar for sethbaur

I appreciate your comments, however, I made this layout myself in Illustrator. I used a screenshot of Safari to make it clear how I intend it to look. Also, Design by Two is my wife and I.

So this web developer is developing his own website. :)

Does anyone have any more constructive ideas?

Member Avatar for DangerDev

can you post code of that page. (along with css)

Member Avatar for sethbaur

I'm sorry, I'm probably not describing my situation very well. The image is just a mock-up created in Adobe Illustrator. My problem is coding it. For example, in the image the header background extends to the edges to of the browser window with no margin. However, when I try to code this there is always a margin around the black part.

Member Avatar for sethbaur

I am making some progress. Here's a screenshot of what I currently have: http://www.domusludorum.com/seth/picture3.png

The margin issue is fixed however there is unnecessary horizontal scrolling. I'm not sure why it's doing this?

Here's the css:

body {
	margin:0px;
}

div.header {
	padding-left:120px;
	background-color:#000;
	padding-top:5px;
	padding-bottom:5px;
	width:100%;
	height:110px;
}

And also the HTML in question:

<body>
<div class="header"><h1>Seth P. Baur</h1></div>
</body>
Member Avatar for MattEvans

Use CSS:

body, html
{
  margin:0;
  padding:0;
}

Should get rid of borders on the page itself..

Member Avatar for MattEvans

try:

body
{
  margin:0;
  padding:0;
}

div.header
{
  background-color:#000;
  height:110px;
}
h1
{
  margin-top:5px;
  margin-left:120px;
  margin-bottom:5px;
}
Member Avatar for sethbaur

That second suggestion fixed the scrolling but now there is a margin at the top. There is about 10 pixels of margin between the black and the top of the browser window.

Member Avatar for MattEvans

Hm.. try setting the 5px top and bottom margins on the h1 to 0, and adding a padding top/ padding bottom of 5px to the div. ( same as you had before; but without setting the width of the div, or a large inner left padding on the div )

Member Avatar for sethbaur

Thanks for the help. It's fixed :).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.