CODEWITHSUNDEEP
htmlcss
Brother Eye
Brother Eye

Reputation: 733

Using CSS Float to make divs stand in 1 line?

I'm trying to arrange my 3 divs to make them stand in 1 line no matter how I adjust the screen width. Despite of the fact that my screen width is 1366px (100%), 1 of my 3 divs stands in a separate line instead of standing in 1 line with the other 2. I've read many answers said to use display: inline-block, but now I'm trying to use float to make it work. Glad if you guys can help. All answers is appreciated. Here are my codes: https://jsfiddle.net/brothereye/z53mjtcy/

My HTML:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="theme.css">
        <title>Module 2 Assignments</title>
    </head>

    <body>
        <h1 id="title">Our Menu</h1>
        <div id="menu col-lg-12">
            <div class="meal col-lg-4">
                <div class="name"><h3>Chicken</h3></div>
                <div class="describe"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p></div>
            </div>

            <div class="meal col-lg-4">
                <div class="name"><h3>Beef</h3></div>
                <div class="describe"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p></div>
            </div>

            <div class="meal col-lg-4">
                <div class="name"><h3>Sushi</h3></div>
                <div class="describe"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p></div>
            </div>
        </div>
    </body>
</html>

My CSS:

body
{
    font-family: Arial;
    font-size: 15px;
    box-sizing: border-box;
}

h1
{
    font-weight: bold;
    text-align: center;
}

.meal
{
    border: 2px black solid;
    margin: 15px;
    float: left;
}

.name
{
    float: right;
    clear: right;
    padding: 0px;
    border-left: 2px black solid;
    border-bottom: 2px black solid;
    font-weight: bold;
}

.describe
{
    float: right;
    margin: 15px;
    text-align: justify;
}

@media (min-width: 992px)
{
    .col-lg-12
    {
        width: 100%;
    }
    .col-lg-4
    {
        width: 33.33%;
    }
}

Upvotes: 0

Views: 131

Answers (1)

Ashish Gupta
Ashish Gupta

Reputation: 97

The div's width is set to 33.33%, however the div's have margin outside them. Hence all three are unable to reside in one line. You can either decrease the div's width (~30.33%) or decrease the margin from div's.

Upvotes: 1

Related Questions