Jump to content

Elastic Design


hanwall

Recommended Posts

Hi there,I want to make my design or my website elastic, so that no matter what screensize you have you will see the page at it was meant to look like.I need quick help! Anyone?I'm using divs, one div_cwrapper and then navbar and content.Thanks...

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.

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...