Layout

[Guest Stefán Örvarr Sigmundsson]

Hi. I always have a lot of problems when it comes to the layout of my sites. I'll begin by describing some common issues that I constantly struggle with and perhaps you know what it is that I'm always doing wrong:1. Let's say I have a div-tag and inside that tag and image. I only want the image to take up as much space as its size, in other words, I want the div's border to wrap around the image and not have extra space between the bottom border and the bottom of the image. Now I found a fix for this which is to make the image "display: block;". I don't understand the logic behind that. Why would there be extra space between the image and bottom border generally speaking? I'm told using the image as the div's background does it, but I don't want to accept that the img-tag isn't good enough.2. Sometimes when I put an image inside a div-tag and put a border around the div then only the top and bottom lines appear (in IE) or just half the left border (mostly in other browsers).3. Continuing with the image inside the div-tag example; if I put some other image or element inside the tag it will always appear below the first image and so on, but not next to it like I want. Now I thought that "clear: none;" was supposed to fix this but it doesn't seem to do anything. At least not for me.4. How do you make things "float" to the centre? The float property only accepts "left", "right", "none" and "inherit" but not "center"? Do I need to put everything into a div-tag and have it use align="center"? Doesn't sound like good option. I prefer CSS solutions.This is good for now. (:

[miocene]

What's the point in having the <div> shrink to the size of your image?It is best to have a "container" div (which is the width of your website) and place all your page content inside the div.You can specify the size of your divs in css with:Width: 790px;OR:Width: 75%where the % is the amount of the space of the object which contains the div that will be taken up.e.g. if you have

<div>	 <div style="width:65%">content here	 </div></div>

then the 2nd div will have a width of 65% of the first divYou can also put a border round images in CSS withimg {border: 1px black solid etc}It would make more sense than putting a border round a <div> that wraps your image

[Guest Stefán Örvarr Sigmundsson]

1. Why put everything inside a div when you have the body-tag around everything?2. So the only way to get things to line up and not split into separate lines is by defining the width of things?3. What's the point of having a div shrink to the size of an image? Well, I could ask you what the point would be to have a div add extra space you don't want around your image. Maybe the right thing to do is just use a raw img-tag, but it must be inside some div or otherwise the validator won't be happy.4. How do I align things, not just text, in the center of the screen with CSS only? I thought that was what the float property was for. At least it makes things "align/float" to the right and left.

[Ingolme]

1. The image tag is an inline element. Inline elements leave a bit of space on the bottom for letters that go below the baseline, like y, g, or j. You don't need to use display: block; you can also try vertical-align: middle;.2. You possibly are making the div exceed the width of its parent element. In most browsers, borders add to the width of the box. This happens if you try to set the width of a block element. By default the block element will fit itself into its parent element respecting all the margins and padding around it.3. Block elements have a line break before and after them by default, so by using display: block; on the image, you're not allowing anything more on that line. As I suggested before, use vertical-align: middle; instead. Also, make sure that if you have set a width for the <div>, that the width is able to hold both images. There's no need for clear: none;, because that's the default value if you don't set it.4. This isn't actually possible with CSS. Even if you put it into a <div> tag, the text would then only go above or below the element and not around it. It would possible be difficult for browsers to render a page that had floated elements in the center.

[Guest Stefán Örvarr Sigmundsson]

Shouldn't the following code appear on one line since I've got the width property there? <div> <div style="width: 33%"> <img src="image.png" /> </div> <div style="width: 33%"> <img src="image.png" /> </div> <div style="width: 33%"> <div>this doesn't appear on one line!!!</div> </div> </div>

[sckewi]

I haven't read any of the other answers so sorry if I'm repeating.

1. Let's say I have a div-tag and inside that tag and image. I only want the image to take up as much space as its size, in other words, I want the div's border to wrap around the image and not have extra space between the bottom border and the bottom of the image. Now I found a fix for this which is to make the image "display: block;". I don't understand the logic behind that. Why would there be extra space between the image and bottom border generally speaking? I'm told using the image as the div's background does it, but I don't want to accept that the img-tag isn't good enough.

<div id="testDiv">	<img id="myImage" src="image.png" alt="Test Image" width="100" height="100" /></div>

#testDiv{	 border: solid 1px rgb(0,0,0);}#myImage{	margin: 0;	padding: 0;	display: block;}

Edit: display: block does it. I wouldn't worry about this too much: remember the objective of CSS is to define how your pages look, so as long as it works and you're not using a proprietary (specific to a particular browser) attribute you're OK.

2. Sometimes when I put an image inside a div-tag and put a border around the div then only the top and bottom lines appear (in IE) or just half the left border (mostly in other browsers).

I reckin you might be floating that div. IE has a dodgy problem with something called hasLayout. The fix is height: 1% for the div itself. The div will still stretch it's height to the height of the image with this fix.

3. Continuing with the image inside the div-tag example; if I put some other image or element inside the tag it will always appear below the first image and so on, but not next to it like I want. Now I thought that "clear: none;" was supposed to fix this but it doesn't seem to do anything. At least not for me.

<div id="testDiv">	<img id="myImage" src="image.png" alt="Test Image" width="100" height="100" />	Blah blah blah. This image is super cool.	<div class="clearer"></div></div>

#testDiv{	height: 1%;	border: solid 1px rgb(0,0,0);}#myImage{	float: left;	margin: 0;	padding: 0;	display: block;}.clearer{	clear: both;}

4. How do you make things "float" to the centre? The float property only accepts "left", "right", "none" and "inherit" but not "center"? Do I need to put everything into a div-tag and have it use align="center"? Doesn't sound like good option. I prefer CSS solutions.

<div id="column2">	I love HTML.</div>

#column2{	border: solid 1px rgb(0,0,0);	width: 100px;	margin: 0 auto; // this is the same as margin-left: auto; margin-right: auto; It basically makes the margins take up the remaining space available not used by the width, effectively centering the element.}

[Ingolme]

Shouldn't the following code appear on one line since I've got the width property there? <div> <div style="width: 33%"> <img src="image.png" /> </div> <div style="width: 33%"> <img src="image.png" /> </div> <div style="width: 33%"> <div>this doesn't appear on one line!!!</div> </div> </div>

<div> elements are block level elements. As stated before: Block elements have a line break before and after them by default.If you want three <div> tags next to eachother, you can use the CSS float attribute:HTML:

<div class="container">  <div><img src="image.png" /></div>  <div><img src="image.png" /></div>  <div>this <em>does</em> appear on one line!!!</div></div>

CSS:

.container {  overflow: auto;}.container div {  float: left;  width: 33%;}

[Guest Stefán Örvarr Sigmundsson]

I must have misunderstood the float property. I thought it made things float on the current line. Didn't know it would make a left-aligned box float onto the previous line if it were set to left. You've helped me so much. Cheers.

[Guest Stefán Örvarr Sigmundsson]

I'm still having endless problems. The height property for a div only seems to work in IE...! I'm thinking about going back to table-design even though it's not standard. At least it never gave me any problems. Damn CSS!

[Ingolme]

I'm still having endless problems. The height property for a div only seems to work in IE...! I'm thinking about going back to table-design even though it's not standard. At least it never gave me any problems. Damn CSS!

The height property should work for all browsers. Are you trying to apply height: 100%? It will not work unless the parent element has a height defined in CSS as well.