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!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS problem - 2-column layout inside a div object formats text wrong

Status
Not open for further replies.
nickruiz

nickruiz

Programmer
Apr 14, 2006
7
US
This is a cross-compatibility issue between Firefox and IE. Before I try to explain the problem, it might be easier to simply post the code and allow you to see the problem for yourself.

CSS file:
Code: 
/* prayerRequest.css */

#prayerRequest
{
  /*position: relative;*/
	background-color: #FFF;
	border:1px solid #000;
	/* width: 500px; */
	/* height: 300px; */
	
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 20px;
	margin-top: 20px;
	
	/* padding: 10px; */
}

#prayerHeader
{
	background-color: #AE4947;
	font-size: 1.2em;
	padding-left: 5px;
	margin-bottom: 20px;
	text-align: center;
}

#prayerLeft
{
  float:left;
  padding-left: 5px;

  width: 50%;
}

#prayerRight
{

}

#prayerBody
{
  padding: 5px;
}

HTML file:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- testPrayerFormat.html -->
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, [URL unfurl="true"]www.pspad.com">[/URL]
  <title>Prayer Request test</title>
  <link type="text/css" rel="stylesheet" href="css/prayerRequest.css"/>
  </head>
  <body>
    <div id="prayerRequest">
      <div id="prayerHeader">Request #1290</div>
      <div id="prayerLeft">
        <p>This stuff should be at the left.</p>
        <p>Blah, blah</p>
      </div>
      <div id="prayerRight">
        <p>This stuff should be at the right.</p>
        <p>Blah, blah</p>
      </div>
      <div id="prayerBody">
        <p>This is the body of the prayer request.</p>
      </div>
    </div>
  </body>
</html>

My problem is that while this displays correctly on an IE browser (Do people still use this browser?? j/k), the text in the left and right columns do not line up correctly in Firefox. I managed to fix this problem with some CSS hacks, but I was hoping that there was a clean method of fixing the problem.

I love those cross-browser CSS interpretation differences. Thank you for your help in advance. Happy Easter.

Thank you,
Nick Ruiz
 
Sort by date Sort by votes
Actually, I noticed that the text formatting is off in IE also. If you have any ideas why this happened, please let me know.
 
Upvote 0 Downvote
Okay, here is my validated code:

Code: 
/* prayerRequest.css */

#prayerRequest
{
  /*position: relative;*/
    background-color: #FFF;
    border:1px solid #000;
    /* width: 500px; */
    /* height: 300px; */
    
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 20px;
    margin-top: 20px;
    
    /* padding: 10px; */
}

#prayerHeader
{
    background-color: #AE4947;
    font-size: 1.2em;
    padding-left: 5px;
    margin-bottom: 20px;
    text-align: center;
}

#prayerLeft
{
  float:left;
  padding-left: 5px;

  width: 50%;
}

#prayerRight
{

}

#prayerBody
{
  padding: 5px;
}

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250"/>
  <meta name="generator" content="PSPad editor, [URL unfurl="true"]www.pspad.com"/>[/URL]
  <title>Prayer Request test</title>
  <link type="text/css" rel="stylesheet" href="css/prayerRequest.css"/>
  </head>
  <body>
    <div id="prayerRequest">
      <div id="prayerHeader">Request #1290</div>
      <div id="prayerLeft">
        <p>This stuff should be at the left.</p>
        <p>Blah, blah</p>
      </div>
      <div id="prayerRight">
        <p>This stuff should be at the right.</p>
        <p>Blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah</p>
      </div>
      <div id="prayerBody">
        <p>This is the body of the prayer request.</p>
      </div>
    </div>
  </body>
</html>

Thanks for your help.
Nick Ruiz
 
Upvote 0 Downvote
I don't get how you want it to look. I tried your code in Mozilla and IE6 and it looks the way I would be expecting it to look based on the code you gave. I would have definitely changed #prayerHeader to h1, because semantically, that is a title, not an unnamed block, but other than that... I think it looks the way it should. No?
 
Upvote 0 Downvote
Thanks again for your help. When I test my code in Firefox, the first line of text in the left and right column are not lined up together. The left column appears to be lower. And in IE6, the "blah"s wrap to the left column, instead of wrapping to the right column.

I would like my CSS code to line up the text correctly within each column. I have been trying to play around with some of the padding and margins, but have not been successful. I will change #prayerHeader to h1.prayerHeader (as I will be using several different h1 headers in my page, but with different colors).

Thanks,
Nick
 
Upvote 0 Downvote
What you're doing right now is floating only your left column and letting your right column wrap around the floated one. That is why the right column starts wrapping under the left one as soon as left one is gone. If you want to preserve wrapping on the sides, you need to float both divs. The gap belongs to the same problem. The text in both divs is correctly put in paragraphs. Paragraphs have default margins and since the right div is not floated its margins are affecting both left and right div. In that manner, left div has the right divs margin-top applied and its own and because of that the text appears lower. Both problems will go away after you float the right container.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
782
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
622
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
739
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
210
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top