Want to split a div into 3 parts, like this

Ok, I have a banner div that I want to have 3 parts, the left (for the logo), the middle (for a stretchy background image), and the right (for an image).

Ok, this is what I have so far


<body>
<div id="container">
<div id="banner"><img src="/images/strange_01.gif" class="floatleft" /><
img src="/images/strange_04.gif" width="382" height="161" class="floatright" />
</div>
</div>

Then my css


div#banner {
background-color: #96a9b4;
background-image: url(/images/strange_03.gif);
background-repeat: repeat-y;
}
div#container {
width: 100%;
}
body {
margin: 0px;
padding: 0px;
}
img.floatleft {
float: left;
}
img.floatright {
float: right;
}
-->

Now, my two images do float left and float right, but now I have a large gap in the middle, because I am trying to repeat a background image, but it isn’t showing up

ok, don’t ask me why, but when I added to #banner position: absolute, it works. Can’t quite figure this one out

Hi,

You need to add width:100% to your #banner (for IE) and then add clear:both after the floats (for mozilla):
e.g.


div#banner {
width:100%;
background-color: #96a9b4;
background-image: url(/images/strange_03.gif);
background-repeat: repeat-y;
}

<div id="container">
<div id="banner"><img src[font=Courier]="/images/strange_01.gif[/font]" class="floatleft" />
<img src="/images/strange_04.gif" width="382" height="161" class="floatright" />
<br style="clear:both" />
</div>
</div>


IE likes to have a width on an outer container when inner elements are floated. Mozilla treats floats as though they are removed from the flow and will not expand the outer unless you have enough content or use clear both as above. (or you could declare a height if you want.)

Hope that helps.

Paul

your so good Paul. Unreal. I have learned so much from you as well as others on this forum

Can you tell me why I only get one result trying to add a background fixed image to my body tag

Here is what I have


body {
 margin: 0px;
 padding: 0px;
 background-color: #CBDBDE;
 background-image: url(/images/background.gif);
 background-repeat: repeat-x;
 background-attachment: fixed;
 background-position: 200px;
 
}

Whether I put 200px, or 300px, or 400px, it ends up in the same place.

Hi,

background position needs 2 co-ordinates. You are placing the image at 200px from the left. If you use 300px from the left its still in the same place because you are repeating it along the x axis.


[font=Courier]background-position:0 300px;[/font]

The 2 co-ordinates are horizontal, vertical.
[font=Courier]

[/font]
background-position:left top; 

Hope that helps.

Paul

I can back this up ! It’s just amazing.

thanks. I probably should have know that.

My last question , I SWEAR!

Like mentioned earlier, I have those that banner div split up into 3 parts. Works great right now. One small problem. Obviously if the window is shrunk, the images will start pushing left. Thats fine. Well the right image is 382px, so is it possible for me to make that a background image while keeping it to the right, and just let it slide underneath the left image when the window is resized?

Here is the site in question

http://www.btkdesigns.com/webdesign

Also, I know we discussed the margin issue regarding my h1 tag on that one site, but on this one, now it only affects Internet Explorer. I have an h2 tag, that I have given a margin of 20px. Well, in Internet Explorer, it hugs the top div id=“content”

I am working on fixing it, but if you know the answer off the top of your head, that would be cool to.

—EDIT—

I fixed it. That is really weird. Its like, certain browsers are VERY picky that you at least apply an attribute to EVERY element. I only had padding to my div id=“content” tag for the left side. So I added padding to the right, top, and bottom, and sure enough, the h2 followed the rules :slight_smile: kinda weird

so is it possible for me to make that a background image while keeping it to the right, and just let it slide underneath the left image when the window is resized?

As usual with cSS there’s loads of different ways to do the same thing.

You could absolutely place the right image and then set z-indexes to let it slide underneath other objects as follows:


<style type="text/css">
div#banner {
width:100%;
height:161px;
background-color: #96a9b4;
background-image: url(/images/strange_03.gif);
background-repeat: repeat-y;
}
div#container {
position:relative;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
}
img.floatleft {
float: left;
position:relative;
z-index:2;
}
img.floatright {
position:absolute;
right:0;
top:0;
z-index:1;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"><img src="/images/strange_01.gif" class="floatleft" />
<img src="/images/strange_04.gif" width="382" height="161" class="floatright" />
</div>
</div>

Hope that helps.

Paul

Thanks Paul

Mozilla doesn’t quite like it though. Neither does firebird. Basically, on my machine, Opera and IE work fine, except opera gets the z indexes confused. It takes the right one and puts it on TOP of the left one when scrolled.
http://www.btkdesigns.com/webdesign

I was having a little play with this and noticed that as well. So I absolute positioned both the left and right image and z-indexed them:

img.floatleft {
	/*float: left; eliminated */
	position:absolute; left:0; top:0;
	z-index:200;
}
img.floatright {
	/*float: right; eliminated*/
	position:absolute; right:0; top:0;
	z-index:100;

But having taken all of the content of the banner div out of the flow its size reduces to nothing and the rest of the content shift up under the images.

So the banner div needs a height:161px. (The height of the images)

This then runs into a spot of bother with IE5.X and its boxmodel, so we need to implement the good ole boxmodel hack if we want to suport this browser. My rule for the banner div now looks like this:

div#banner {
	background-color: #96a9b4;
	width: 100%;
	background-image: url(images/strange_03.gif);
	background-repeat: repeat-x;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #275361;
	/* all changes below */
	height:165px;/* height + paddings + borders (ie5win Box model hack begins) */
	voice-family: "\\"}\\"";
	voice-family:inherit;
	height: 161px; /* real height */
}
html>body #banner {
  height: 161px; /* real height again (ie5win Box model hack ends) */
}

Hope this helped. :slight_smile:

Rik

Off Topic:

Your filler text is hilarious! Can I copy that?

Thanks, I will check it out. I really hate absolutely positioning things because I don’t quite fully understand it all.

-off topic-

What do you thin of my “eye”. Kinda freaky in a weird way

Hey Zoef, I tried it.

The menu looks better, but the far right image just looks like it is on the left side behind my main logo image. I will upload it for you to see

http://www.btkdesigns.com/webdesign

Thanks
Bryan

Nevermind. Sorry, I was born an idiot and will always be an idiot!

I forgot the right: 0; top: 0;

So when you say, right:0, is that saying, do be away from the right side more then 0 pixels?

Eh, I’m not sure what you mean there so I’ll try to put in in my own words.

An absolutely positioned element is take out of the ‘normal flow’ of the document. You can put it were you want with left, right, and bottom. These refer to where this element will be put related to the element that contains it, or its ‘mother element’, if you wish.

So ‘left:10px; top:40px’ will put it 10px away from the left edge and 40px away from the top edge of the containing element. ‘right:3em; bottom:7pt;’ will put it at 3em from the right edge and 7 points from the bottom.

Hope this helped :slight_smile:

Rik

thanks. I didn’t realize that i said

“do be away” :), oops. You explained it just fine

These refer to where this element will be put related to the element that contains it, or its ‘mother element’, if you wish

Just to add to Zoefs description:

The parent element for a positioned element is defined as any parent element thats has a value for the property position other than static (default), otherwise the parent element is the html element (body outside of all margins). (I must write this down somewhere as I keep saying it a lot these days ;)).

What this means is that the parent must either be position:relative (without co-ordinates - and everything stays in the flow) or position:absolute.

Mozilla doesn’t quite like it though. Neither does firebird

Both browsers worked on my machine with no problems although OPera didn’t like the relative on the float and wouldn’t give it a stacking context. So the best solution as you found out was to place the left image using the same procedure as the right.

Sorry I didn’t get back early and thanks to Zoef for pointing you in the right direction :).

Paul

As I understand it you float works like another kind of position. So a float rule would defeat a position:relative rule on the same element and vice versa.