Dreamweaver question, containers reaching boundaries of screen

cndb · Jun 12, 2013

I'm still a bit new to HTML/CSS programming, and to Dreamweaver, but lately I've been trying to familiarize myself with it.

Long story short, I can't seem to get any of the content 100% flush with the page (well, I can, but it's complicated and impractical).

I've tried using 100% on width, I checked to make sure there was no space with the border/padding/margin, I tried various percentage and pixel measurements for basic containers. Even the <hr> tag won't make itself flush on both sides of the screen. Is this something programmed into Dreamweaver for easier viewing/aesthetic purposes? Neither the code page, nor the preview in Firefox. It's like a small margin has been programmed in on the top, left, right, and presumably bottom. Using Dreamweaver v.6 BTW.

But here is the weird thing. On the page I had a CSS command for a background for the whole body and it was unaffected by this inherent wall. However, on another site I was building, I had the same problem if the background was within a container.

The other weird thing is that I could get a container completely flush with the left or right (but not both), but for the left I had to use absolute positioning, and for the right I had to enter an outrageous pixel amount or percentage over 100%. And again, it would only go to one side.

So forgive a rookie's question, but what am I doing wrong?

katherine · Jun 12, 2013

What about posting some code ?

cndb · Jun 12, 2013

I created a fairly simple test page from scratch to highlight the issues shown, so there shouldn't have been any preexisting formatting (unless DW puts it in by default).

This is a screenshot of how it turned out.
http://s1289.photobucket.com/user/cndb1/media/dnforum_zps060f2ac6.png.html?sort=3&o=0

The code itself:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<Style type="text/css">

body

{
background-color: #99c
}

.con
{
position: absolute; left: 0px;
}

.border
{
border: solid black;
width: 100%;

}

</style>

</head>
<body>

<p>This is a test</p>

<hr />

<div class="con"> Leftmost container</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
<hr />
<div class="border">Without absolute position</div>
</body>
</html>

katherine · Jun 12, 2013

There are default margins and other properties that vary slightly from one browser to another. The rule of thumb is that default styling applies to elements that are not explicitly styled through CSS (or plain old tags).
Perhaps this is what you need:

HTML:

body {
margin: 0;
background-color: #99c
}

If I understand what you are trying to achieve...

Biggie · Jun 12, 2013

try this, I change "position: absolute; left: 0px; :" to > position: absolute; left: 10px;

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<Style type="text/css">

body

{
background-color: #99c
}

.con
{
position: absolute; left: 10px;
}

.border
{
border: solid black;
width: 100%;

}

</style>

</head>
<body>

<p>This is a test</p>

<hr />

<div class="con"> Leftmost container</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
<hr />
<div class="border">Without absolute position</div>
</body>
</html>

you should declare a "body width" so the page doesn't take up full screen of each respective browser

maybe 90% or less, but you can play with it.

cndb · Jun 12, 2013

katherine said:
There are default margins and other properties that vary slightly from one browser to another. The rule of thumb is that default styling applies to elements that are not explicitly styled through CSS (or plain old tags).
Perhaps this is what you need:

HTML:

body { margin: 0; background-color: #99c }

If I understand what you are trying to achieve...

Actually, the background for the body is fine. It's the content and containers. And I got the same result in Firefox, Safari, and the DW preview screen.

cndb · Jun 12, 2013

Sorry biggie, I don't think you understand. I want the content to look the same way on the screen that the absolute container did, without the complications of having to use absolute.

I want to be able to make things on the page reach across the whole screen (like the dark blue header on this page, for example).

Biggie · Jun 12, 2013

Hi

check this example, may be what you're trying to achieve:

http://w3schools.com/css/tryit.asp?filename=trycss_margin_sides

they have free editor and all types of coding examples

cndb · Jun 12, 2013

Maybe that example can help me explain things better.

If you at the source code on the left, that is what I was hoping I could get text to look like. But on the output side, even without the custom margin it seems to be indented automatically on both sides. Is this something universal for HTML?

Theo · Jun 12, 2013

If you want to occupy the full width of the browser, you use:

Code:

body {
  margin: 0px;
}

That being said, you're confusing div id's and classes.

A better way would be to define a div outside your content, which can be styled. For example:

Code:

#full {     

background-color: #F90;

}

Then in the HTML you do something like:

Code:

<body>

<div id="full">

<p>This is a test</p>

<hr />
<p>Some junk</p>

<div class="con">
blah blah 
...</div>
.
.
.
</div>

Etc.

cndb · Jun 13, 2013

The margin set to 0 was the solution.

Thank you all for your tips and advice.

Dreamweaver question, containers reaching boundaries of screen

cndb

Level 3

katherine

Country hopper

cndb

Level 3

katherine

Country hopper

Biggie

DNForum Moderator

cndb

Level 3

cndb

Level 3

Biggie

DNForum Moderator

cndb

Level 3

Theo

Account Terminated

cndb

Level 3

Who has viewed this thread (Total: 1) View details

Who has watched this thread (Total: 2) View details

Similar threads

The Rule #1

Members Online

☆ Premium Listings

Sedo - it.com Premiums

Premium Members

Latest Comments

Upcoming events

New Threads

Our Mods' Businesses

Spread the Word!