extending background block beyond floated image

snappy · #1 Oct 8th, 2006, 16:59

I'm pretty sure my code is bit messy, but can anyone tell me how to extend the white background beyond the floated image without using a fixed pixel height.
I want the white block behind to expand should the user enlarge the body text and also if I need to include alot more text. Currently it will be fixed at 123px whatever.

CSS:-
#maincontent{
width:420px;
background-color: transparent;
padding: 0px;
margin-top:10px;
margin-left:5px;
margin-right:0px;
float:right;
}
#maincontent h1{
margin: 10px 0px 0px 0px;
padding: 5px;
background-color: #556B2F;
color: #ffffff;
font-size: 90%;
font-weight: bold;
}
#maincontent .body{
height: 123px;
background-color: #fff5ee;
margin: 0px;
padding: 5px 5px 2px 5px;
font-weight: normal;
font-size:80%;
line-height: 130%;
}
#maincontent .left img{
float: left;
padding: 0px;
margin: 0px 5px 0px 0px;
}
#maincontent .right img{
float: right;
padding: 0px;
margin: 0px 0px 5px 0px;
}

HTML:-
<div id="maincontent">
<p class="pagetitles">This is the main title</p>
<h1>NEWS: This is the sub title</h1>
<div class="body">
<div class="left"><img src="imagesOct/bumble1.jpg" alt="bumblebee photo"/>
</div>
This is the text accompanying photo
<p><a href="#">this link leads to either a new page or page section >> </a></p>
</div>
</div>

ukgeoff · #2 Oct 8th, 2006, 17:11

I can't quite see what you are getting at. Can you explain further.

BTW. Get out of the habit of having class names the sam as tag names. It will lead to much confusion along the way.

You have a div with a class='body'

Code: Select all

.body {
   This style refers to your class name.
}

body {
   This style without the leading dot refers to the body tag.
}

snappy · #3 Oct 8th, 2006, 21:25

Geoff, thanks for the tip re. duplicate naming, good point! Changed the class to .text
Attached is a screenshot of what I've achieved using pixel height attached to the .text class and a float:left; on the image to make the white background extend around the floated image.
I'm sure this is wrong, I want the white background to expand with the text if the user enlarges the font size. There must be a better way of doing this.
CSS:

Code: Select all

#maincontent{
width:420px;
background-color: transparent;
padding: 0px;
margin:10px 0px 0px 10px;
float:left;
}
#maincontent h1{
margin: 10px  0px 0px  0px;
padding: 5px;
background-color: #556B2F;
color: #ffffff;
font-size: 90%;
font-weight: bold;
}
#maincontent .text{
height: 123px;
background-color: #fff5ee;
margin: 0px;
padding: 5px 5px 2px 5px;
font-weight: normal;
font-size:80%;
line-height: 130%;
}
#maincontent .left img{
float: left;
padding: 0px;
margin: 0px 5px 0px 0px;
}

HTML

Code: Select all

<div id="maincontent">
<h1>NEWS: Main heading</h1>
<div class="text">
 <div class="left"><img src="imagesOct/bumble1.jpg" alt="bumblebee photo"/>
</div>
text that goes with image
<p><a href="#">this link leads to either a new page or page section >> </a></p>
</div>
</div>

ukgeoff · #4 Oct 9th, 2006, 17:29

You don't need the <div> around the image. Just float the image within the text <div>.

Would be much better if you could put the page somewhere where I can see it.

snappy · #5 Oct 10th, 2006, 18:04

www.wildside-creative.co.uk/layout.html

Firstly I have a three column layout with 'leftnav' <div> and 'rhpanel' <div> floated over a 'maincenter' <div> which has margins to accomodate the floated divs.
The first problem is that the 'mainframe' height only extends to accomodate the content in the 'maincenter' <div> and appears to ignore the floated items.
If I give the mainframe a fixed pixel height to at least accomodate the 'leftnav' menu bar height, will this mean that it won't expand to accomodate additional content in the 'maincenter' nor expand should my users enlarge the text size?

Likewise the divs within the maincenter (made up of h1 + 'text' div + a floated image) don't extend to accomodate the floated image and, again, don't expand the white area should the viewer enlarge the text size. I don't want to give a fixed pixel height as I would like the heights of the boxes to vary with the content (text or images) but they need to at least accomodate the image. By the way the <div> around the image is there because some of the images will be floated right rather than left.

Do you have a simple solution that I am missing? The attached link should illustrate my problem(s).
Cheers alot again!
Snappy

ukgeoff · #6 Oct 10th, 2006, 19:22

In the sticky at the top of this forum is a Templates tutorial.

Download and work through that and you will be well on your way.

Ryan Fait · #7 Oct 14th, 2006, 20:12

If I understand what you're trying to do, padding will also give extra space for a background to show up.

snappy · #8 Oct 20th, 2006, 21:09

Geoff: I worked thru the tutorial and it helped me understand how the page layout works - thanks. www.wildside-creative.co.uk/trust.html
I am still having the problem with the background to the blocks in the main content area. Its fine in Firefox with a min-height property but this doesn't seem to work in IE.
I think its because I've created it as a <div class="text"> with a style as
#maintextarea .text{
min-height: 123px;
background-color: #fff5ee;
margin: 0px;
padding: 5px 5px 2px 5px;
font-weight: normal;
font-size:1em;
line-height: 130%;
}
Is this where I'm going wrong? Or is it an IE issue?
Any advice much appreciated.
Ryanfait: Adding padding just made it too big in Firefox and if I put the above style in the ie.only stylesheet with extra padding it has no effect.

ukgeoff · #9 Oct 20th, 2006, 21:38

If you back to the sticky again, at the bottom in the Articles section is a link to an article written by Ryan that should solve your problem.

snappy · #10 Oct 20th, 2006, 21:56

I had a look at that, but not quite sure where it should go in my stylesheet.
If I attach it to the floated img it affects the dimensions of the image.
Can you explain any further?

Ryan Fait · #11 Oct 21st, 2006, 02:01

You just need to put this after the floated images:

Code: Select all

<div class="clear"></div>

spinal007 · #12 Oct 21st, 2006, 08:47

the same old bugs are just becoming more and more common as people start switching to CSS eh?

Ryan Fait · #13 Oct 21st, 2006, 08:58

It's simply a person who isn't fluent in CSS...

snappy · #14 Oct 21st, 2006, 12:23

Yup, you're right, I'm certainly not fluent...just learning!
To clarify, I need the <div class="clear"></div> after the floated images and then
class{clear: both;} in both stylesheets or just the ie.only stylesheet?

The white box behind the text and image(only one img per box, floated either left or right) is made up of

Code: Select all

#maintextarea .text{
min-height: 123px;
background-color: #fff5ee;
margin: 0px;
padding: 5px 5px 2px 5px;
font-weight: normal;
font-size:1em;
line-height: 130%;
}
#maintextarea .left img{
margin-right: 5px;
float: left;
padding: 0px;
}
#maintextarea .right img{
float: right;
padding: 0px;
margin: 0px 0px 5px 0px;
}

Is this where I'm going wrong? Should it be contained in a block div?
Your help is much appreciated. Thanks.

ukgeoff · #15 Oct 21st, 2006, 14:41

You want a seperate style block in your stysheet called 'clear' containing the lines as per Ryan's article.

Then as the last line of code in each of your blocks, include the line;
<div class='clear;'></div>

Ryan Fait · #16 Oct 23rd, 2006, 00:43

The semicolon in <div class="clear";></div> is an accident. Should be <div class="clear"></div>

snappy · #17 Oct 27th, 2006, 17:58

I've created a block div that contains the title, text and floated image. It seems to work fine now without any 'clear' class at all. My problem is, I don't really understand why things do and don't work!

Geoff, your template tutorial helped me alot and I'm starting to get the hang of things. However I want to add a horizontal sub-menu along the top, above the header): join us; contact us; welsh site; etc. and can't work out how to move the header down to accomodate it. I've included the html and style code below. Can you help? Should I post this as a new thread?

HTML: Select all

<div id="menu">
<ul>
<li><a href="#">join us</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">cymraeg </a></li>
</ul>
</div>

Code: Select all

#menu{
width: 798px;
font-size: 90%;

}
#menu ul{
text-align: right;
list-style-type: none;
line-height: 10px;
padding-left: 0px;
}
#menu li{
display: inline;
}
#menu a{
text-decoration: none;
color: #34431B;
font-weight: normal;
}
#menu a:hover{
text-decoration: underline;
color: #556B2F;
}

ukgeoff · #18 Oct 27th, 2006, 19:33

You really should have started this as a new thread.

However, the easiest way would probably be to give your header a suitable top margin and place your top menu in that space.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
extending background block beyond floated image