Hello Webmasters.
Please I need ur help. Am taking a training in web development and I've just been given my first real test by my supervisor. I am required to float the imagebox to left and have the text wrap around it. But I don't know why the text keeps getting inside the imagebox even after I set a margin-bottom. Here's a link to understand what am trying to say http://www.fextaceswepcoproducts.com/products.html

He did the stylesheet and I don't seem to have a clue as to how to set the <p> to obey the the margin-bottom value.
Here's my code for the imagebox [base.css]

img.portrait
 {float: left;
 margin: 0 25px 25px 10px;
 width: 300px;
 height: auto;
 border: 3px solid #666;
}

Please help.

Use padding-bottom in instead of margin-bottom, let's see if it works.

That problem is definitely from somewhere else.

Paste ur html and full css

ur mistake...

u gave the image a margin-bottom of -30px;

if remove it the whole thing will fall back into place...

try it..

mashnino: ur mistake...

u gave the image a margin-bottom of -30px;

if remove it the whole thing will fall back into place...

try it..

Where did you see this?

Afam4eva:
Where did you see this?

I think say i blind ooo, na d thing wey i dey find since

You have lots of unsemantic codes in your html file.
You have lots of !important command in your css. !important is very dangerous. Stop using it and learn css specificity.


Why save your image with png when the image is not transparent. With png, you got 163KB, but I resaved it with jpg and got 28KB.

Just check this and copy the code and let's see what happens. http://www.ctrlshiftstudios.com/test
Copy the css code and go to base.css and paste it at the bottom of the file and save, then refresh your page and see.

GraphicsPlus: You have lots of unsemantic codes in your html file.
You have lots of !important command in your css. !important is very dangerous. Stop using it and learn css specificity.


Why save your image with png when the image is not transparent. With png, you got 163KB, but I resaved it with jpg and got 28KB.

Just check this and copy the code and let's see what happens. http://www.ctrlshiftstudios.com/test
Copy the css code and go to base.css and paste it at the bottom of the file and save, then refresh your page and see.

Thank you sir. It worked ok but affected some other rules with the lastcolumn class

mashnino: ur mistake...

u gave the image a margin-bottom of -30px;

if remove it the whole thing will fall back into place...

try it..

You are actually right sir. There was a .resume img class in "screen.css" with a margin-bottom of -30px. I deleted the class and the whole thing fell in place.

I think I can walk into class boldly tomorrow. thank you all

may i get your website details? Then i can help you?

feel_me:

You are actually right sir. There was a .resume img class in "screen.css" with a margin-bottom of -30px. I deleted the class and the whole thing fell in place.

I think I can walk into class boldly tomorrow. thank you all

no p....u re welcome