[Solved] positioning section and div [closed]

by


You can simply use two div elements to divide your page to 70% and 30%. I have edited a bit of your CSS and it works:

CSS:

.sec
{
width:70%;
float:left;
background-color: red;  
margin-bottom: 3em;
}
.side
{
width:30%;
float:left;
background-color:Green;
}

HTML:

<div id="wrapper">
//your rest of HTML

<div class="sec">
                            <h1>Last news</h1>
                            <article>
                                    <h1>News #1</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p>
                            </article>
                            <footer>
                                    <ul>
                                            <li>Author: admin</li>
                                            <li>date: 31.12.2003</li>
                                    </ul>
                            </footer> <!-- date and author #1 -->
                            <!-- news1 -->

                            <article>
                                    <h1>News #2</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p>
                            </article>
                            <footer>
                                    <ul>
                                            <li>Author: admin</li>
                                            <li>date: 31.12.2003</li>
                                    </ul>
                            </footer>  <!-- date and author #2 -->
                            <!-- news2 -->

                            <article>
                                    <h1>News #3</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p>
                            </article>
                            <footer>
                                    <ul>
                                            <li>Author: admin</li>
                                            <li>date: 31.12.2003</li>
                                    </ul>
                            </footer>  <!-- date and author #3 -->
                            <!-- news3 -->

                    </div>
                    <div class="side">
                            <h2>Most popular articles</h2>
                            <ul>
                                    <li>Example article #1</li>
                                    <li>Example article #2</li>
                                    <li>Example article #3</li>
                                    <li>Example article #4</li>
                                    <li>Example article #5</li>
                                    <li>Example article #6</li>
                                    <li>Example article #7</li>
                                    <li>Example article #8</li>
                                    <li>Example article #9</li>
                                    <li>Example article #10</li>
                            </ul>
                    </div>
//your footer code here...
</div>

DEMO

solved positioning section and div [closed]