I just want to make the three articles in 3 columns, when I code it using dreamweaver on design mode panel, they are in three columns but when I preview it using live view or browser its doesnt appear in three columns, what possible code mistakes did i do?
CSS
.3col {
left:0;
float:left;
top:0;
height:100%;
width:200px;
}
HTML
<section id="otherArticles">
<article>
<div class="3col">
<header><h3>Lorem ipsum dolor sit amet</h3></header>
<p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
</article>
<article>
<div class="3col">
<header><h3>Lorem ipsum dolor sit amet</h3></header>
<p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
</article>
<article>
<div class="3col">
<header><h3>Lorem ipsum dolor sit amet</h3></header>
<p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
</article>
</section>
HTML IDs and CSS Classes can't start with a digit! Change 3col
to something like column
.
Here's a simplified example:
CSS:
<style>
.column {
float: left;
width: 200px;
}
</style>
HTML:
<div class="column">
<h3>Test</h3>
<p>Rutrum vitae vestibulum condimentum metus...</p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With