Question 398214 in Html Question posted in
Some basic documentation can be found here.

Html – Div float left, div float right

Hello guys be kind I’m new to programming.
I just started doing some stuff to practice so I created a little web site. I created a div container with a display block for the ul ‘home, service, ecc..’ on the top of the container and then two div. one to the left with float left and one to the right with float right. The problem is that i made them 70% and 30% width but won’t fix in the container. The only way is to make the right one width 26.9% and that’s hilarious because I can even see the little space left between them. Also if i make them height: 100% they will both go down outside the container, how do I make them the same height as the container? I would like to use the % so that it can be as responsive as it can.

I tried everything I could to fix them in the container. I just can’t see the problem.

Here’s the code

.container {
    display: block;
    border: solid black 1px;
    width: 70%;
    height: 1000px;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 40px;
}
article {
    float: left;
    border: solid black 1px;
    width: 70%;
    height: auto;
}
aside {
    float: right;
    border: solid black 1px;
    width: 29.6%;
    height: auto;
}
    <div class="container">
        <nav>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Servizi</a></li>
                <li><a href="#">Contattaci</a></li>
                <li><a href="#">Iscriviti</a></li>
            </ul>    
        </nav>
        <article>
            <h1>Lorem</h1>
            <p>Lorem</p>
            <br>
            <p>Lorem50</p>
        </article>
        <aside>
            <ul class="sideTitles">
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Lorem</a></li>
            </ul>
        </aside>
    </div>
Tags:

2

Answers


  1. 0

    You need to use Flexbox layout as it has made the responsive page creation much easier and also solves your problem as the following example:

    .container {
    display: flex;
    border: solid black 1px;
    width: 70%;
    height: 1000px;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 40px;
}
article {
    border: solid black 1px;
    width: 70%;
    height: auto;
}
aside {
    border: solid black 1px;
    width: 29.6%;
    height: auto;
}
     <div class="container">
    <nav>
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Servizi</a></li>
            <li><a href="#">Contattaci</a></li>
            <li><a href="#">Iscriviti</a></li>
        </ul>    
    </nav>
    <article>
        <h1>Lorem</h1>
        <p>Lorem</p>
        <br>
        <p>Lorem50</p>
    </article>
    <aside>
        <ul class="sideTitles">
            <li><a href="#">Lorem</a></li>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">Lorem</a></li>
        </ul>
    </aside>
</div>
    Login or Signup to reply.
  2. 0

    Just add box-sizing: border-box; to all elements to include the borders in the widths, which are otherwise added to the widths by default:

    .container {
    display: block;
    border: solid black 1px;
    width: 70%;
    height: 1000px;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 40px;
    box-sizing: border-box;
}
article {
    float: left;
    border: solid black 1px;
    width: 70%;
    height: auto;
    box-sizing: border-box;
}
aside {
    float: right;
    border: solid black 1px;
    width: 29.6%;
    height: auto;
    box-sizing: border-box;
}
    <div class="container">
        <nav>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Servizi</a></li>
                <li><a href="#">Contattaci</a></li>
                <li><a href="#">Iscriviti</a></li>
            </ul>    
        </nav>
        <article>
            <h1>Lorem</h1>
            <p>Lorem</p>
            <br>
            <p>Lorem50</p>
        </article>
        <aside>
            <ul class="sideTitles">
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Lorem</a></li>
            </ul>
        </aside>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search