Enjoy unlimited access to all forum features for FREE! Optional upgrade available for extra perks.
Domain summit 2024

Dreamweaver question, containers reaching boundaries of screen

Status
Not open for further replies.

cndb

Level 3
Legacy Platinum Member
Joined
Jan 31, 2009
Messages
62
Reaction score
0
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?
 
Domain summit 2024

katherine

Country hopper
Legacy Exclusive Member
Joined
Jul 9, 2005
Messages
8,428
Reaction score
1,290
What about posting some code ?
 

cndb

Level 3
Legacy Platinum Member
Joined
Jan 31, 2009
Messages
62
Reaction score
0
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>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<hr />
<div class="border">Without absolute position</div>
</body>
</html>
 

katherine

Country hopper
Legacy Exclusive Member
Joined
Jul 9, 2005
Messages
8,428
Reaction score
1,290
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

DNForum Moderator
Legacy Exclusive Member
Joined
Sep 4, 2002
Messages
14,866
Reaction score
2,120
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>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<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

Level 3
Legacy Platinum Member
Joined
Jan 31, 2009
Messages
62
Reaction score
0
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

Level 3
Legacy Platinum Member
Joined
Jan 31, 2009
Messages
62
Reaction score
0
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

DNForum Moderator
Legacy Exclusive Member
Joined
Sep 4, 2002
Messages
14,866
Reaction score
2,120

cndb

Level 3
Legacy Platinum Member
Joined
Jan 31, 2009
Messages
62
Reaction score
0
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

Account Terminated
Joined
Feb 28, 2004
Messages
30,318
Reaction score
2,217
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.
 
Last edited:

cndb

Level 3
Legacy Platinum Member
Joined
Jan 31, 2009
Messages
62
Reaction score
0
The margin set to 0 was the solution.

Thank you all for your tips and advice.
 
Status
Not open for further replies.

The Rule #1

Do not insult any other member. Be polite and do business. Thank you!

Sedo - it.com Premiums

IT.com

Premium Members

AucDom
UKBackorder
Be a Squirrel
MariaBuy

New Threads

Our Mods' Businesses

UrlPick.com
Free QR Code Generator by MerchArts

*the exceptional businesses of our esteemed moderators

Top Bottom