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
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    H2 width ruins P float

    Hi guys,

    I want to make my text display in columns. I use to simply use divs for each column, but this time I want to make it semantically correct. That's why I stick with h and p tags. However, whenever I apply a 'width' to my h2 tag, it ruins the P float and pushes both the new h2 and p below the first one instead of aligning it next to it. I tried to apply a float to the h tag too along with clearing floats, but nothing seems to help. Below is relevant code:

    Code:
    h2 {			max-width:340px;
    				margin:0 0 10px 0;
    				font-family:Arial, Helvetica, sans-serif;
    				font-size:18px;
    				color:#000;
    				}
    				
    p {				width:340px;
    				font-family:VegurRegular;
    				float:left;
    				}
    Code:
    <h2>Komplet hjemmeside med lalalalallalala</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis ligula, sed luctus mi. Praesent velit tellus, dapibus vel vulputate quis, cursus et turpis. Sed volutpat facilisis ligula dapibus luctus. Praesent elit lorem, pellentesque vestibulum posuere a, sollicitudin dapibus neque. Suspendisse et ultrices est. Nulla arcu magna, eleifend non aliquam vitae, bibendum in magna. Proin ultricies ante in mauris aliquam vitae elementum mi aliquet. Donec elementum, lacus eu placerat porta, nulla diam ornare sapien, vitae ornare tellus purus ac mi. Morbi hendrerit nunc nunc, in porttitor purus. Nam eleifend lorem a justo gravida ut ornare diam dignissim. Suspendisse vitae neque est, eu porta turpis. In fringilla, erat ut pretium ultrices, mi nisl ultricies quam, in adipiscing odio elit at sapien. Aenean consequat lobortis pretium.</p>
    
    <h2>Bla bla</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis ligula, sed luctus mi. Praesent velit tellus, dapibus vel vulputate quis, cursus et turpis. Sed volutpat facilisis ligula dapibus luctus. Praesent elit lorem, pellentesque vestibulum posuere a, sollicitudin dapibus neque. Suspendisse et ultrices est. Nulla arcu magna, eleifend non aliquam vitae, bibendum in magna. Proin ultricies ante in mauris aliquam vitae elementum mi aliquet. Donec elementum, lacus eu placerat porta, nulla diam ornare sapien, vitae ornare tellus purus ac mi. Morbi hendrerit nunc nunc, in porttitor purus. Nam eleifend lorem a justo gravida ut ornare diam dignissim. Suspendisse vitae neque est, eu porta turpis. In fringilla, erat ut pretium ultrices, mi nisl ultricies quam, in adipiscing odio elit at sapien. Aenean consequat lobortis pretium.</p>
    Last edited by CaptainB; 04-01-2011 at 09:35 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    hmm A heading tag is meant to style a bit of text and give it weight and importance. Not sure what exactly your desired outcome is by using a h2 tag with a 340px width.

    You say you want two columns. Thats what divs are for correct? Can you post your entire code or a link to the site?
    Teed

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    but this time I want to make it semantically correct.
    Aligning those elements in 2 columns wouldn't be easy without using 2 wrapper divs. I don't think anything wrong in using two divs there.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thank you guys.

    @teedoff: I'm aware of that. I just wanted to limit the width of the heading

    Thank you both - I'll use divs for the markup.


  •  

    Posting Permissions

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