Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Silly aligning problem

    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:
    Code:
    .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:

    Code:
    <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
    Last edited by mikemhz; 08-09-2007 at 12:54 AM.

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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:

    Code:
    .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.

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    .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;
    }
    Last edited by mikemhz; 08-09-2007 at 01:32 AM.

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •