Member Avatar for davy_yg

Hello,

I am trying to scretch right and left my header and footer but as far as now it only scretch right.

#navigation {margin: -5px 0 0 10px; min-width: 100%; height: 120px; background-color:#655700; border-radius: 0; position: fixed; z-index:2;}

#footer {background: url(images/footer.jpg) repeat-x; background-color:#d08e38; height: 135px; min-width: 100%; position: absolute; margin: 100px 0 0 0;}

What else should I change to make it sretch both left and right?

  • 3 Contributors
  • 8 Replies
  • 220 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by davy_yg

Dani AI

Generated

Short answer: the header/footer aren’t stretching because of offsets and how they’re positioned — not because of responsive design. is right that responsiveness matters later, but the immediate problem is layout (margins, positioning and the element’s containing block). ’s stylesheet is useful as a starting point, but the browser’s default page margins and any parent with a positioning context are the usual culprits.

Why this happens and a simple fix. A left margin on a full-width element pushes the box inward while a “100% width” can still force overflow to the right, which makes it look like it only stretches to the right. Also, absolutely positioned elements size to their nearest positioned ancestor; if that ancestor is a centered container, the footer won’t reach the viewport edges. The reliable approach is to remove body/page margins and pin the bars to the viewport edges.

Try this minimal example (adapt values to your design):

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

#navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: #5d4500;
  z-index: 100;
}

#footer {
  position: absolute; /* or fixed if you want it always visible */
  left: 0;
  right: 0;
  bottom: 0;
  height: 135px;
  background: #d18f39;
}

Troubleshooting checklist: (1) Remove any margin-left on the header and remove min-width:100% — it’s unnecessary here. (2) Use devtools → Computed/Box model to see which ancestor is forming the containing block (look for a non-static position). (3) Temporarily add a bright outline or background on the element to confirm its edges. (4) If content should sit centered inside a full‑bleed bar, create a full‑width bar (pinned as above) and place an inner .wrapper { max-width: XXXpx; margin: 0 auto; }.

Caveats: avoid 100vw for the full width (scrollbar can cause a horizontal scrollbar). If the header/footer overlap page content, add top/bottom padding equal to their heights so content isn’t hidden.

Recommended Answers

All 8 Replies

Member Avatar for davy_yg

Here is my page by the way:

I also try to compare it with: .

I wonder why this page looks good in all browser screen size and mind doesn't.

Member Avatar for mattster

sretch

What do you mean by this?

why this page looks good in all browser screen size

Because they are using responsive design. This relies on a grid system and a page that adapts when the browser is re-sized. Start by playing with CSS @media queries.

Member Avatar for oriclon

Yes. You need to have a css format, such as this.
its long, so copy and paste. Use the hash tagged words for what you want to use.

body {
font-family: verdana, arial, sans-serif;
background-color: F0E68C;
color: black;
}
h1 {text-decoration: underline;}
#navbar {
font-family: verdana, arial, sans-serif;
font-size: .9em;
}
#navbar ul {
list-style: none;
width:100%;
margin: 0;
padding: 0;
padding-top: 4px;
}

#navbar li { display: inline;}
#navbar li a:link, #navbar li a:visited{
text-decoration: none;
float:center;
width:15em;
padding:0.1em .5em 0.05em; 2em;
color: white;
background-color: #0000b7;
border-top: .15em solid silver;
border-left: .15em solid silver;
}

#navbar li a:hover {
float:center;
width:15em;
padding:0.1em .5em 0.05em; 2em;
color: white;
background-color: #000078;
border-top: .15em solid #000082;
border-bottom: .15em solid black;
border-right: .15em black;
}

#floatImageLeft {
float:left;
border:1px solid black;
margin:0px 15px 15px 0px;
padding: 15px;
text-align:center;
}
#floatImageCenter{
float:left;
border:1px solid black;
margin:0px 15px 15px 0px;
padding: 15px;
text-align:center;
}

#floatImageRight {
float:right;
border:1px solid black;
margin:0px 0px 15px 15px;
padding: 15px;
text-align:center;
}
commented: He hasn't asked for nav bar styles? He's sorting out positioning & screen sizes. Try to help him with HIS QUESTION, generally is a good idea. -1
Member Avatar for oriclon

if that worked, good, if not post again.

Member Avatar for oriclon

you can edit some of the commands such as
2.font-family: verdana, arial, sans-serif;
3.background-color: F0E68C;
42.#floatImageLeft(
43.float:left;
44.border:1px solid black;
45.margin:0px 15px 15px 0px;
46.padding: 15px;
47.text-align:center;

Member Avatar for davy_yg

I do not understand what you are trying to do.

I copy your style.css to a new page and create this index.php

index.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>



<div id="navbar">Navigation</div>

</body>

</html>

All I see is a blank yellow page with a "Navigation" text on the left corner of the page.

Member Avatar for mattster

I do not understand what you are trying to do.

I don't either.

Anyway, if you want to achieve the responsive technique on mobile devices, as I say you have to look at media queries (here and here).

Member Avatar for davy_yg

okay, that's if you want a different items for different web browser size.

As of now, what I want is to see the header brown background color stretch left and right and the footer brown background color stretch left and right as well.

This is the code that I have so far:

style.css

#navigation {margin: -5px 0 0 10px; min-width: 100%; height: 120px; background-color:#655700; border-radius: 0; position: fixed; z-index:2;}

#footer {background: url(images/footer.jpg) repeat-x; background-color:#d08e38; height: 135px; min-width: 100%; position: absolute; margin: 100px 0 0 0;

Please help me to modify it to make it works.

This is my web:

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.