2 div on same line

[TheCandyman]

I'm trying to work on the old issue of getting two Div on the same line. Each div has an image to show, which i need to make them appear there is no break between them, unless there is a better way to get this to work? I don't really want to have to do a table showing the images. Currently it only shows the Wave_L

#Wave_L {
	background: url('images/02.gif') no-repeat left top;
	width:838px;
	height:111px;
	z-index:1;
	display:inline;
}
Wave_R {
	background: url('images/03.gif') no-repeat right top;
	width:177px;
	height:111px;
	z-index:2;
	display:inline;
}

	<div id="Wave_L"></div>
	<div id="Wave_R"></div>

 

[vacunita]

Float both divs.

#Wave_L {
    [red]float:left;[/red]
    background: url('images/02.gif') no-repeat left top;
    width:838px;
    height:111px;
    z-index:1;
    display:inline;
}
Wave_R {
    [red]float:left;[/red]
    background: url('images/03.gif') no-repeat right top;
    width:177px;
    height:111px;
    z-index:2;
    display:inline;
}

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BabyJeffy]

I'll guess that it's not because you missed the # character before the Wave_R css definition

Here is another way to do what you want (I think) by wrapping the divs in another div and then floating the contents (as vacunita has written) within a relatively positioned div:

#Wave_L {
    background: url('images/02.gif') no-repeat left top;
    width:838px;
    z-index:1;
}
#Wave_R {
    background: url('images/03.gif') no-repeat right top;
    width:177px;
    z-index:2;
}
#Wave_L, #Wave_R {
    height:111px;
    display:inline;
    [!]float: left;[/!]
}
.wrapper {
    [!]position: relative;[/!]
    height: 111px;
}

[!]<div class="wrapper">[/!]
  <div id="Wave_L"></div>
  <div id="Wave_R"></div>
[!]</div>[/!]

I haven't tested this... so no warranties!

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[TheCandyman]

I tried both of of your suggestions, but can't seem to get it to work. Take a look here for the page

http://www.azda.org/testing/new/

 

[vacunita]

Try giving your wrapper a width that can fit both waves. something like 1020px.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[TheCandyman]

I tried that, but it still wraps. I even bumped up the wrap width to make sure that wasn't it.

Any other suggestions?

 

[BillyRayPreachersSon]

You currently have many DIV elements inside A elements, which is not valid markup. This needs to be fixed.

Your problem is caused by the right-corner being floated. This would be better of being absolutely positioned.

Don't forget to include a "clear:left" element after the header, though.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[TheCandyman]

Thanks for you help! I think i'm getting it, just slow trying to get my last of css understand to do what i would like.

 

[TheCandyman]

This post is just to clear everything up. Plus i see quiet a few website clicks coming over so i thought it would be good to post the final code.

If you have questions start a new post!


html

<div class="wrapper">
   <div id="Wave_L"></div>
   <div id="Wave_R">
      <a href="contact.asp">&nbsp;</a>
   </div>
</div>

css

.wrapper {position: relative; width:955px; height:102px;}
#Wave_L {background: url('[URL unfurl="true"]http://www.website.com/images/ly_WaveL.gif')[/URL] no-repeat top; width:789px; height:102px; z-index:1; float:left; display:inline;}
#Wave_R {background: url('[URL unfurl="true"]http://www.website.com/images/ly_WaveR.gif')[/URL] no-repeat top; width:166px; height:102px; z-index:2; float:left; display:inline;}
#Wave_R a {text-decoration: none; font-size:40px; padding-left:100px; padding-right:50px;}