Need help stretching a horizontal slice

We have a website the place that the design was executed in Photoshop. I sliced the structure into 3 main parts: header, a horizontal piece to stretch vertically to let for longer heights, and a footer. These three are each of their own < div>, which might be inside of a new " wrapper" < div>. Right now, as it stands right this moment, I have to help manually set the height in the " stretch" < div> to suit the content. This very bad once the browser is resized. So, my question is actually two:

  1. The " content" < div> needs to be attached, or found within, which higher < div> Right this moment it is in the header < div> b/c I don’t know how to put it in the " stretch" < div> to create that < div> resize to suit the content.
  2. If that " content" < div> is positioned in the " stretch" < div> certainly, what kind connected with css do I desire to make the " stretch" < div> essentially stretch vertically, so the content establishes the height of this < div> (so that page is resized automatically), without my manual height setting

Thanks earlier for your guide.


I’m undecided I understand the particular question, but perhaps you have added the min-height property for a content div

div#content min-height: 500px;

See if that does what you would like. If not, upload the page and chek out it so you can see what everyone mean. You won’t have yelled at regarding link dropping just because a mod specifically asked one to show us what you’re suffering.

Well, very first does the " content" div belong in the " stretch" div Pondered rather the subject matter div only often be at tall because the content, not a standard height. I just want the " stretch" div to stretch because the " content" div becomes taller.

Incidentally, the website is usually shepherdsling. com. You will observe the pages there.

Many thanks.

From U . S .

I don’t truly see the point in the " stretch" div. What should certainly go into it Why would it be there What will you be trying to grow exactly and why

Cool site, though. POST don’t often notice mentions of Assyria on the internet. My wife’s relations are Assyrian.

The only reason for the " stretch" div would be to hold the horizontally slice (which will be background image of this div), that allows the page that they are any height. Whenever a a better strategy to do it, I am all ears. I simply don’t would like to manually size the height in the page, when MY PARTNER AND I put " content" in the content div.


Hold out… I think POST see what everyone mean. You want your content to fit in the center of that rounded rectangular shape, and you really want the background to go down so far as the content may.

Here’s how you will be actually going to have to do it, and its not necessary the stretch website:

< div id=" content" >
< div id=" content-top" >
And here , your content should go.
< /div>
< /div>
Your footer will click on over.

This can be your CSS.

div#content min-height: 500px; size: 960px; background: (your content bg goes here) prime center repeat-y; /* the min-height needs to be the height in the gradient top element, plus some padding to make sure some of the white results. */
div#content-top size: 960px; background: (your header background goes here) prime center no-repeat; /* that no-repeat will display the header track record once and only once, and then head over to the content background following that. No stretching vital. */

Hopefully this specific makes some good sense. I wish Pondered a current example for you personally of this. Fundamentally, what happens is your content div can show the content background with the header on the most notable and will stretch to at the least 500 pixels and around the height of the content, regardless of how it really is resized.

An added thing… you have no need to use position: comparable; unless you’re gonna absolutely position something within the relative pot. And that’s a concept you ought to be really on the actual ball with.

Can you explain why you ought to be on the shot with using placement: absolute And, certainly, the reason POST put position: relative to the header div is so I could apply position: absolute with another elements like the actual nav image. Once more, if there is exactly how, let me know.

That’s advisable if you work toward putting the elements in out of your document flow. By way of example, you put that relative container with, you put that content, and then you position the header nav at the end. I do this quite often, with the 100 % intention of busting the document movement. That makes good sense.

But you’re not really at that point… yet. You’re better off learning the way to put things in order from top to bottom, left to perfect, and learning the way to mess with the actual order. You will get there if you look into your design skills around you do adding decent content, even though.

The only reason I position the nav div where I did is so that we could place it where I needed to. The reason POST put it since a child of the header div is the fact that I wanted the idea " attached" towards header so which my content couldn’t affect its job. Having never officially studied html or css, I admittedly haven’t learned some of the basics of web page design, which is probably why I will be having trouble with the subject of this particular thread. I think We have a basic perception of document flow, even though.

I am still a little unclear around the code you published above. To simplify, the rounded white-colored box is nothing greater than a design decision to attempt to present the content inside a better fashion. The train connected with thought behind what Used to do was this:

  • body offers bg color along with bg image (the vertical gradient, repeat-x)
  • header div offers header image while bg, and the nav div since a child of it, so I’ll place the nav div so that it will not shift with content
  • footer div appeared to be for footer image as bg, in addition to footer menu along with copyright info, which might be children of the actual footer div, again so content wouldn’t affect the keeping those divs
  • the idea powering the stretch div was to obtain that little
This entry was posted in Web Design and tagged , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *