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:


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;
}



<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>

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?

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.

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.