...

View Full Version : Silly aligning problem



mikemhz
08-09-2007, 01:52 AM
Hey so all I wanted to do was make a simple 'block' title for a paragraph of text with the title on the left and the date on the right... here's the css I used:

.heading
{
background-color: #8A8A8A;
height:14px;
width: 100%
padding-left:10px;
padding-right:10px;
}

.heading h1
{
font-size: 12px;
float:right;
}

.heading h2
{
float:left;
font-size: 13px;
color: white;
}


So then all I'd need for the HTML would be:



<div class="heading">
<h2>Welcome to the site, *****es =)</h2>
<h1>Wednesday 8. Aug 2007</h1>
</div>


But for some random reason, the float property, applied to only one H tag, makes it "float" out of the containing box, applied to both the box disappears (or becomes very small). Just using text-align makes them appear on different lines... and display:inline gets rid of any left or right alignment so they appear next to eachother.

Advice would be mucho appriciated <:s

Mike

garydarling
08-09-2007, 02:04 AM
Your code is close; it actually does what you want but you cant see the white text on your white background. Try this adjustment to your CSS, then play with the results:


.heading
{
background-color: #8A8A8A;
height:2em;
width: 100%; /*make sure you escape this line with a semicolon*/
padding-left:10px;
padding-right:10px;
}

.heading h1
{
font-size: .9em;
float:right;
}

.heading h2
{
float:left;
font-size: 1em;
color: white;
}

See if that is what you are looking for.

mikemhz
08-09-2007, 02:16 AM
Ah yeah I think that semicolon must have been causing problems, but now I've realised that I think H tags add an automatic line break kinda like P tags... meaning I can't fit them into such a thin box =( hmm maybe I could try defining a few more properties like line-height e.c.t.

...It's a grey background by the way :P I report back, thanks.

EDIT: I got it working! You have to set margin or padding to 0 with H tags apparently.


.heading
{
background-color: #8A8A8A;
height:16px;
width: 680px;
padding-left:10px;
padding-right:10px;
}

.heading h1
{
font-size: 12px;
float:right;
margin:0;
padding:0;
}

.heading h2
{
float:left;
font-size: 13px;
color: #6F2525;
margin:0;
padding:0;
}

garydarling
08-09-2007, 02:23 AM
I believe you are right on the automatic line break. Maybe create an identical box, 50% width on each, float one left and the other right. At 14px your gray box was only tall enough to display one line of text; the white text flowed into the white background of my test page due to the line break.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum