css problem in opera and firefox 3

davikokar · Dec 7, 2005

Hallo,

I am trying to convert my old table-layout site into a css layout site. What I am trying to have is something like that:

that means:
a title
a picture and a description on its right

I use this code:

Code:

<style>
div.job_record_text {float:left;padding-left:3px;border-left:1px #663300 solid;}

div.job_record_pic {float:left;	padding-right:3px;}

h2.subtitle {margin:0px;
	     font-size:100%;
	     color:#000000;
	     padding-bottom:7px;}

div.spacer15 {height:15px;clear:both;}
</style>

<html>
<h2 class="subtitle">Title</h2>
<div class="job_record_pic"><img src="logo_tunis.gif" /></div>
<div class="job_record_text">Text Text Text Text Text Bla bla bla  bla bla</div>				
<div class="spacer15"></div>
<h2 class="subtitle">Title</h2>
<div class="job_record_pic"><img src="logo_tunis.gif" /></div>
<div class="job_record_text">Text Text Text Text Text Bla bla bla  bla bla</div>

... etc

on IE it works quite fine. But on Firefox and Opera the description would be under the pic and not on its right...

do you have a suggestion? thanks

Vragabond · Dec 7, 2005

Divs by default are 100% wide if not specified differently. Stacking two 100% wide elements next to each other cannot be done.

Here's a few ideas:
1. You could go with a picture being a background and applying padding to avoid cover ups with text.
2. You could float just the picture. That will work with the examples shown but if the text is longer, it could wrap under the picture. Don't know if you would want that.
3. You don't need to wrap the picture in a div. Just floated picture would be enough.
4. Paragraph would work better semantically than div when wrapping the text.

I would have probably gone with floating pictures and text in a paragraph.

ChrisHunt · Dec 8, 2005

Divs by default are 100% wide

Not if they're floated, they shrink to fit their content.

All the same, you're massively overcomplicating things with all those <div>s. Start with the principal of keeping your HTML as lean as possible, and only add <div>s (or <span>s)when you need them. There's no point in taking the old table layout and swap <td>s and spacer gifs for <div>s.

Here's how I'd mark it up:

Code:

  <div class="jobs">
    <h2>Title 1</h2>
    <img src="pic1.gif" />
    <p>Text Text Text Text Text Bla bla bla  bla bla</p>

    <h2>Title 2</h2>
    <img src="pic2.gif" />
    <p>Text Text Text Text Text Bla bla bla  bla bla</p>
  </div>

The only <div> I have there is to stop me having to declare classes on every element - I can just use inheritance instead. The CSS is quite simple too:

Code:

    .jobs h2 {
      margin: 15px 0 0;
      clear: left;
      font-size:100%;
      color:#000000;
      padding-bottom:7px;
    }

    .jobs img {
      float: left;
    }

    .jobs p {
       margin: 0 0 0 [red]100px[/red];
       border-left: 1px solid #630;
       padding-left: 3px;
    }

You'll need to give the <p> elements enough right margin (coloured red) to accommodate the width of your images.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

1DMF · Dec 8, 2005

div's can be stacked next to each other using the 'float' option.

Code:

<div align=left>my text</div><div align=right>more text</div>

this will not work and place each div under each other.

however using the float

Code:

<div style="float:left;">my text</div><div style="float:right;">more text</div>

will work.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

davikokar · Dec 8, 2005

thanks to all of you for the valuable suggestions

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

css problem in opera and firefox 3

davikokar

Technical User

Vragabond

Programmer

ChrisHunt

Programmer

1DMF

Programmer

davikokar

Technical User

Similar threads

Part and Inventory Search

Sponsor