Image margins within a DIV

**alfie.romeo** · Jan 17, 2007 04:37

morning

in my attempt to get better at CSS layouts, i've come across another little problem that i can't solve.

i have a right floated DIV with some text and images in it. i don't want the images to be too close to the text so i thought i would create another style. the floating DIV is called .right and within this i created a sub class called #right.rightimage and set the padding to 20px. (i tried the margin too but both had no effect.)

i then set the class of the images to class="rightimage" - this made no difference so i tried class="right.rightimage" (in case i was doing something wrong. i have only just discovered the # option for defining styles)

well, both didn't work and i still have my images squashed against my text. i just wondered if i was making an obvious mistake or if i'm just going about this totally the wrong way. here is my code anyway. many thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>
</head>

<body>
<div id="right" class="right">
<img src="images/wtg.gif" width="117" height="16" class="right.rightimage"><br>
Text text text<br>
<img src="images/wu.gif" width="106" height="13" class="rightimage"><br>
Text text text<br>
<img src="images/wp.gif" width="104" height="15" class="rightimage"><br>
Text text text<br>
<img src="images/tvc-.gif" width="179" height="14" class="rightimage"><br>
Text text text<br>
<img src="images/pl.gif" width="114" height="15" class="rightimage"> <br>
Text text text<br>
<img src="images/ta-mini.gif" width="64" height="14" class="rightimage"> <br>
</div>
</body>
</html>

**Paul O'B** · Jan 17, 2007 04:52

the floating DIV is called .right

Isn't that nice

But it doesn't tell us anything about what you want or what you have done. If you are trying to float the text next to the image then you will have to specify a width because floats without widths will eventually expand to 100% when content stretches them

On the other hand if you want space around the floated image then apply the margins to the image and it will repel the text.

If you want the text to stay at the side of the image and not wrap under then you need a margin on the text content.

Here is a demo that explains it.

http://www.pmob.co.uk/temp/caption3.htm

Note that floats are removed from the flow and that margins on the static content will ignore the float and take their measurements from the parent container. Therefore the text would need a margin greater than the images width before you would notice it.

There are more advanced ways to this as follows.

http://www.pmob.co.uk/temp/gallery-imageclear.htm

Hope it helps

**alfie.romeo** · Jan 17, 2007 04:55

sorry paul

half my post got cut off. this happened yesterday to one as well. very strange. i will edit so the whole thing is there but thanks for your response. i will look at those links.

**alfie.romeo** · Jan 17, 2007 06:23

hello again

i have looked at your examples and that all works fine, i just wondered if it was possible for my method to work. what i was aiming for is probably a bit primitive in the fact i just want to create a bit of a margin at the bottom of the image. i don't neccesarily want the text to float around it (in this instance). just sit below the image with a bit of a margin.

thanks

**markbrown4** · Jan 17, 2007 06:39

Hi,

Your selector #right.rightimage is incorrect.
This selector will apply the CSS to an element with id="right" AND class="rightimage"
If you add a space
#right .rightimage - this means a element with class="rightimage" that is within an element with id="right"

You don't need any of these classes unless you want some to be different..

Code:

<div id="right">
  <img src="images/wtg.gif" width="117" height="16">
  <p>Text text text</p>
  <img src="images/wu.gif" width="106" height="13">
  <p>Text text text</p>
  <img src="images/wp.gif" width="104" height="15">
  <p>Text text text</p>
  <img src="images/tvc-.gif" width="179" height="14">
  <p>Text text text</p>
  <img src="images/pl.gif" width="114" height="15"> 
  <p>Text text text</p>
  <img src="images/ta-mini.gif" width="64" height="14"> 
</div>

#right p { /* style the text */ }
#right img { /* style the image */ }

**Paul O'B** · Jan 17, 2007 06:42

Hi,

If you want the text to be further down from the image then apply a bottom margin to the image.

.rightimage {
margin:0 0 20px 0;
}
[code]

I'm afraid your code is nonsense a sit makes no sense.

Code:

#right.rightimage {
padding: 20px;
}
-->
</style>
</head>

<body>
<div id="right" class="right">
<img src="images/wtg.gif" width="117" height="16" class="right.rightimage"><br>
Text text text<br>

The style (#right.rightimage) would actually match the first line (<div id="right" class="right">) and apply extra padding to the container and not the image. However IE6 doesn't understand the dot separated (idname.classname) format so I would advise against using it anyway.

You could use multiple classes and just space separate them but you are making things far to complex for such an easy task. Just apply the margin to the bottom of the image either by a single class or by context.

(in case i was doing something wrong. i have only just discovered the # option for defining styles)

Using id's is no difference really to using classes except that you can only use them once and they carry a little more weight. Otherwise their usage is the same as classes but you can only use them once per page as they must identify the element uniquely.

**alfie.romeo** · Jan 17, 2007 07:26

thanks paul

i'm struggling here, i have tried adding the class to the image but it makes no difference visually. (i even tried Vspace to see if that made a difference and it didn't) so i guess that rules out it being a mac thing too.

there must be something in my right DIV that is stopping all other class actions happening. bugger.

**Paul O'B** · Jan 17, 2007 07:30

Do you have a link online so we can see what you are doing

Otherwise post all your new code and well take another look. (Use the code tags when you paste code in the message board

)

**alfie.romeo** · Jan 17, 2007 08:00

...it's probably rubbish coding and is setting a bad example to the kids.

ok, this code thing, i have tried putting in the tags but it never seems to work for me. just like my posts getting cut off short when they are posted (probably a good thing with my waffling). however i will try again.

have just done a preview and my [/CODE] tage was being cut off! for some reason. is it cause i'm on a mac do you think?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
*{padding:0;margin:0;}

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
}
.right {
	float:right;
	line-height:12px;
	width:200px;
	margin:20px 25px 0 0;
	display: inline;
	padding: 5px;
	display: inline;
	font-size: 9px;
}
.rightimage {
	margin-bottom: 5px;
	margin-top: 1px;

}v
-->
</style>
</head>

<body>
<div class="right"> 
  <div class="rightimage"><img src="images/wtg.gif" width="117" height="16"></div><br>
Text text text   
<div class="rightimage"><img src="images/wu.gif" width="106" height="13"></div><br>
Text text text
</div>
</body>
</html>

**Paul O'B** · Jan 17, 2007 09:38

Hi,

Well as far as I can tell from that code you are getting the space you want under the image. Your code is a bit overkill and you could simlify it like this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

* {padding:0;margin:0;}

body{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
}
.right {
    float:right;
    line-height:12px;
    width:200px;
    margin:20px 25px 0 0;
    display: inline;
    padding: 5px;
    display: inline;
    font-size: 9px;
}
.right img {
    margin:10px 0 5px 0;
    display:block;
}

</style>
</head>
<body>
<div class="right">
    <p><img src="images/wtg.gif" width="117" height="16">Text text text </p>
    <p><img src="images/wu.gif" width="106" height="13">Text text text</p>
</div>
</body>
</html>

You must use a full doctype with uri or ie6 will be working in quirks mode.

Regards

Paul

**alfie.romeo** · Jan 17, 2007 10:17

thanks paul

that works fine but i have to admit i'm confused as to why it works.

how do the images know to have the .right img style applied to them?

the code (hang on):

Code:

<div class="right">
    <p><img src="images/wtg.gif" width="117" height="16">Text text text </p>
    <p><img src="images/wu.gif" width="106" height="13">Text text text</p>
</div>

makes no reference to the .right img style. the only thing i can see that's different is the <p> tags added. does that make a difference?

one other thing, i see you have display:block used. i suppose it's obvious but i have often wondered just what it is that these things do, display inline, display as table etc... i have used them but if honest, not sure why i've used them if you get my drift.

cheers

**Paul O'B** · Jan 17, 2007 11:06

Hi,

The image is styled via this style here:

Code:

.right img {
    margin:10px 0 5px 0;
    display:block;
}

It tells the browser to style all images (img) that are within a class of .right. The parent div has a class of right and therefore all images in that block will get the style applied.

You don't have to class everything. You can target them via their context.

e.g. div#test p {color: red;}

That would style all p tags that are contained within the id of #test.

I set the images to display:block so that there was no need to add a break in the html because the image would then generate a line-feed in the same way that a div would because a div is a block level element.

inline elements are elements like anchors and spans and em and do not generate line feeds at the end. You can of course change their display with css so they act like block elements but the rules of html must still be observed.

block level elements like divs can contain other block level elements but inline elements can only contain inline elements (excluding anchors which can't be nested). (and excluding p tags which are a special type of block level element that can only contain inline elements.)

the only thing i can see that's different is the <p> tags added. does that make a difference?

Only to the semantics. Its bad practice to wrap everything in divs when there are more semantic html tags available. A div is just a basic container and useful for grouping elements together but inside that div the elements should be contained within semantic html elements such as p tags or heading tags or list tags etc.

**alfie.romeo** · Jan 17, 2007 11:53

hello paul

ah, right that has opened my eyes cause i didn't know you could do that. very useful. i would have classed everything and made it all very complicated.

i think i need to learn what inline elements are and block elements.

i have always temeded to use <BR> instead of <P> i guess i should change this practice now then.

just want to say thanks very much for all your help over the last few days, i've learned a lot. still got loads to take in mind and i'm creating different layouts each day just to get some idea of posibilities. no doubt i'll have loads more questions and queries but i just wanted to let you know that i really appreciate your help.

cheers

**Paul O'B** · Jan 17, 2007 14:12

have always temeded to use <BR> instead of <P> i guess i should change this practice now then

Yes breaks shouldn't be made just to make space. They would be used to make line breaks for example in lines of poetry or addresses but not in paragraphs of text because either its a paragraph or its not and a p tag is the correct tool for the job.

Semantic html is very important because it describes the content better and makes for easier to read and more logical pages. It also gives you all the various elements that you can use for styling without having to class everything as would be the case if everything was in divs.

Avoid divitus and classitus as much as possible.

**alfie.romeo** · Jan 17, 2007 16:31

hi paul

have a late night learning session. when you say semantic html, you mean actual html tags like <h1> , <ol> etc...

have looked at your test you linked to. i'm quite amazed at its simplicity and to be honest, it's totally changed the way i now think about layouts and possibilities. i'm going to search out some more examples and tutorials.

one other thing, i had never come across the <dl> tag. just searched for it and now i know what it does. brilliant. i found it on this site here http://www.w3schools.com/tags/tag_dt.asp

i guess you could pretty much use all the tags on the left. if you really needed them?

cheers

**alfie.romeo** · Jan 18, 2007 04:44

morning

ok i got this morning with the intention of taking out all my <BR> tags and consigning them to the bin. so imagine my frustration when this happened:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
*{padding:0;margin:0;}

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
}

h1{

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 20px;
	padding-bottom: 10px;
}

.copy{
	padding-left:25px;
	margin:20px 195px 0;
	border-left: 1px solid #0099FF;
}

.main{float:left;width:100%;margin:0 -235px 0 -200px;}


-->
</style>
</head>

<body>
<div class="main"> 
  <div id="content" class="copy"> 
    <h1>Content</h1>
    <p>i want this to autostretch etc...i want this to autostretch etc etc etc 
      etc etc etc etc ...</p>
    <p>i want this to autostretch etc...</p>
    <p>i want this to autostretch etc...</p>
    <p>i want this to autostretch etc...</p>
    <p>i want this to <a href="#">autostretch</a> etc...</p>
    <p>i want this to autostretch...</p>
  </div>
</div>
</body>
</html>

as you can see, all my copy is bunched up with no para spaces. all i can think is that i need to define my <p> tag as a class. i did think though that because <p> was semantic html, this wouldn't be neccesary. would that be wrong?

thanks

**markbrown4** · Jan 18, 2007 04:55

Hello,

* {padding:0;margin:0;} is quite a powerful line, it literally removes all the padding and margin from every HTML tag(element). So the normal space around the images you are expecting to see need to be re-declared.

Code:

p { padding: .5em 0; }

That line would set the new default style for every paragraph on your page to have a top and bottom padding of .5em

You will need to do the same thing for all your standard elements, like headings list etc.. It seems like a hastle the first time you do it because you have never had to bother with it in the past - but I assure you it, it will save you code if you persevere with it.

**alfie.romeo** · Jan 18, 2007 05:15

thanks mark

i thought it might be something like that (i think

)

i'm making a big old practise page and trying to use different bits of CSS skills i'm picking up. what tends to happen though is a soon as i get one bit working, something weird happens elsewhere! a couple of link styles are playing up now when clicked, still i'm keeping on at it

cheers

User Tag List

Thread: Image margins within a DIV

Thread Tools

Display

Image margins within a DIV

got it to work but...

tried using the <p> tag

Bookmarks

Bookmarks

Posting Permissions