Jump to content

Elastic Design


hanwall
 Share

Recommended Posts

If you do not assign a width to a <div> element, it will stretch to take all the available horizontal space. No matter the size of the window, the <div> element (or any block, for that matter) will take as much horizontal space as it can.

Link to comment
Share on other sites

If you do not assign a width to a <div> element, it will stretch to take all the available horizontal space. No matter the size of the window, the <div> element (or any block, for that matter) will take as much horizontal space as it can.
Yes I understand that... but if I want it in a special width, is there any possibillity to make the div change in som percent kind of way depending on the window size? Or can I just use max width and min width to make this happen? Hmm... I have a picture background and then I have my divs adjusted to the right in the window space, so I don't want them to take up all the window...
Link to comment
Share on other sites

You can assign left and right margin to the <div> element so that it won't go all the way to the edge of the screen.Something like this:

<div id="main"></div>

CSS:

#main { margin-left: 120px; margin-right: 80px; }

If you don't want it to stretch beyond a certain limit then you can assign a max-width. You can also assign a min-width as well.

Link to comment
Share on other sites

You can assign left and right margin to the <div> element so that it won't go all the way to the edge of the screen.Something like this:
<div id="main"></div>

CSS:

#main { margin-left: 120px; margin-right: 80px; }

If you don't want it to stretch beyond a certain limit then you can assign a max-width. You can also assign a min-width as well.

I dont understand why I dont understand.. It seems to be easy... Im going crazy!I want all the content I have, so lets say the wrapper, to be right-adjusted in the window and I want it to follow with the size of the window so that you don't have so scroll horizontal....
Link to comment
Share on other sites

Well, to begin with, the examples I gave you will never give you a scroll bar.If you want the wrapper adjusted to the right, then give it a left margin and no right margin. The following code will create a container that is attached to the right side of the window.The <html> and <body> elements sometimes have their own padding or margin, it's good to get rid of that first.

<div id="wrapper"></div>

html, body {  padding: 0;  margin: 0;}#wrapper {  margin-left: 140px;  background-color: blue;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...