CODEWITHSUNDEEP
csshtml
selva
selva

Reputation: 53

css article and aside issue in html5

Here is my code:

<aside class="aside">
    <img src="img/agencies.png" alt="agencies" />
    <h3>From the Blog</h3>
    <p class="windows">DAVID  <i> on </i>c# Windows</p>
    <p class="hex">How to convert System.Color to HTML color (hex)?</p>
    <p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
    <a  href="#" class="view">view answer</a>
</aside>

Here is my jsfiddle: http://jsfiddle.net/d0teo50p/

I had set width for article 75% and for aside 25%. But aside part displayed on right-bottom of the section.

Please see my JSfiddle, and help me what is my mistake.

Thanks in advance..

Upvotes: 1

Views: 515

Answers (2)

Rahul
Rahul

Reputation: 5774

Change this style from your code 

#header h1
{
    float:left;
}

to 

#header h1
{
    clear:both;
}

and add float:left to both aside and article. These fixes should fix the alignment problem.

Demo : http://jsfiddle.net/d0teo50p/3/

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Use display:table and display:table-cell to achieve this.

 #section {
 display:table;
 }

.article {
width:75%;
padding-bottom: 50px;
display:table-cell;
vertical-align:top;
}

.aside{
display:table-cell;
vertical-align:top;
width:25%;  
}

DEMO

Upvotes: 1

Related Questions