Web Design Help Forum & Web Development Help Forum
The #1 Web Design & Web Development Resource
Welcome Guest!
Please login
If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:
- Receive Fast Advice
- Learn Programming Languages
- Get Professional Website Reviews
- Quick Troubleshooting Assistance
 |
Elements Wrap To Window Width
This is a discussion on Elements Wrap To Window Width, within the CSS section. This forum and the thread "Elements Wrap To Window Width" are both part of the Designing Your Website category.
  |
| Elements Wrap To Window Width |
 Jun 3 2008, 11:40 AM
Post
#1
|
|
|
Fresh Squeezed  Group: Members Posts: 32 Joined: 18-February 08 Member No.: 169  |
Can anyone explain why inline-block elements (e.g. images) wrap to the window width rather than the page width? Example
CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> #long{ width: 2000px; height: 10px; } .box{ border: 1px solid #000; width: 150px; height: 150px; } </style> </head> <body> <div id="long"></div> <div> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> </div> </body> </html> Thanks Dave |
 |
 
|
|
Jun 3 2008, 11:58 AM
Post
#2
|
|
 Co-Founder Group: Co-Founders Posts: 2,445 Joined: 13-February 08 From: Pink House in USA Member No.: 3 |
Hey Dave!
Your images are not in the div id="long" Currently you have them in an unstyled div. -------------------- The Squeeze Shop is OPEN! I just ordered my awesome shirts! Did you?
Maine-ly Web Design | My Photography | Twitter ME Become a Fan on Facebook | Check out Stumbleupon |
|
|
|
|
Jun 3 2008, 04:21 PM
Post
#3
|
|
|
Fresh Squeezed Group: Members Posts: 32 Joined: 18-February 08 Member No.: 169 |
QUOTE (Linda @ Jun 3 2008, 12:58 PM)  Hey Dave! Your images are not in the div id="long" Currently you have them in an unstyled div. Hi Linda Thanks for your reply, I didn't mean them to be in the long div. I thought the long div would make the body element expand to fit it in, but instead it just overflows the body. How would I get the body to expand to fit its child elements? Dave |
|
|
|
|
Jun 3 2008, 07:40 PM
Post
#4
|
|
|
Co-Founder Group: Co-Founders Posts: 2,445 Joined: 13-February 08 From: Pink House in USA Member No.: 3 |
If you want the images to fit the width of a screen (in your example you have 2000px)
Then you would use html code such as this. CODE <body> <div id="long"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> <img src="./Untitled%20Document_files/blank.gif" alt="blank.gif" class="box"> </div> </body> </html> You can use the div="long" as your container. Everything else can go inside. But since you are specifying a width in pixels, it's not going to be fluid as in the case if you used 100% width. See if this is the answer to your question. -------------------- The Squeeze Shop is OPEN! I just ordered my awesome shirts! Did you?
Maine-ly Web Design | My Photography | Twitter ME Become a Fan on Facebook | Check out Stumbleupon |
|
|
|
|
Jun 4 2008, 02:20 AM
Post
#5
|
|
|
Fresh Squeezed Group: Members Posts: 29 Joined: 6-March 08 From: Birmingham Member No.: 196 |
QUOTE (djeyewater @ Jun 3 2008, 10:21 PM) How would I get the body to expand to fit its child elements? As far as I know there is no way to make the body expand dynamically. As Linda explained you will have to put the images inside the div. -------------------- Viventic Web Design and Application Development
|
|
|
|
|
Jun 4 2008, 05:23 AM
Post
#6
|
|
|
Rapid Squeezer Group: Mentor Posts: 482 Joined: 15-February 08 From: UK Member No.: 143 |
QUOTE (djeyewater @ Jun 3 2008, 05:40 PM) Can anyone explain why inline-block elements (e.g. images) wrap to the window width rather than the page width? The short answer: they're not inline-block elements.  <img> is structurally an inline element (just like <em> or <strong>). By default, it's display type is inline; you can, however, change the display type using CSS: img { display: block; } |
|
|
|
|
Jun 5 2008, 10:16 AM
Post
#7
|
|
|
Fresh Squeezed Group: Members Posts: 32 Joined: 18-February 08 Member No.: 169 |
So would I be correct in thinking that the largest width an element with auto width will stretch to is the window width, if I want it wider than that I need to set a specific width or min-width?
|
|
|
|
|
Jun 5 2008, 10:44 AM
Post
#8
|
|
|
Co-Founder Group: Co-Founders Posts: 2,445 Joined: 13-February 08 From: Pink House in USA Member No.: 3 |
QUOTE (djeyewater @ Jun 5 2008, 11:16 AM) So would I be correct in thinking that the largest width an element with auto width will stretch to is the window width, if I want it wider than that I need to set a specific width or min-width? Yes that sounds correct!! -------------------- The Squeeze Shop is OPEN! I just ordered my awesome shirts! Did you?
Maine-ly Web Design | My Photography | Twitter ME Become a Fan on Facebook | Check out Stumbleupon |
|
|
|
|
Jun 5 2008, 11:03 AM
Post
#9
|
|
|
Rapid Squeezer Group: Mentor Posts: 482 Joined: 15-February 08 From: UK Member No.: 143 |
QUOTE (djeyewater @ Jun 5 2008, 04:16 PM) So would I be correct in thinking that the largest width an element with auto width will stretch to is the window width, if I want it wider than that I need to set a specific width or min-width? Almost correct, but not quite. "Auto" is the default setting for width in CSS. Auto-width (block) elements will expand according to the content they contain. For example: let's say you have an auto-width <div>, and fill it with text. The <div> will first expand horizontally, until it hits a containing edge (either a parent element, or the viewport itself). It will then start to expand vertically. However, if any item inside the <div> has a width greater than the viewport, then the <div> will expand beyond the viewport, and you will get a horizontal scrollbar. Auto-width elements will not fill the viewport automatically; they only expand when there's content to push them. If a <div> is empty, it takes up zero space on the page (assuming you haven't forced a width, or borders, or whatever). I'm not sure why you'd want something to be wider than the viewport. |
|
|
|
|
Jun 6 2008, 11:29 AM
Post
#10
|
|
|
Fresh Squeezed Group: Members Posts: 32 Joined: 18-February 08 Member No.: 169 |
Thanks for your comprehensive reply!
Dave |
|
|
|
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Similar Topics
| Topic Title | Replies | Topic Starter | Views | Last Action | |||
|---|---|---|---|---|---|---|---|
 |
20 | Monie | 373 | 14th February 2008 - 05:16 PM Last post by: karinne |
|||
 |
6 | Jason | 148 | 21st February 2008 - 12:25 PM Last post by: thesealportalteam |
|||
|
4 | deb0and | 89 | 5th March 2008 - 10:49 AM Last post by: rewake |
|||
|
3 | paintingtheweb | 100 | 18th April 2008 - 07:04 AM Last post by: karinne |
|||
|
4 | Monie | 153 | 23rd April 2008 - 10:58 PM Last post by: Monie |
|||
