Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Roman Gulevskiy
.a{fill-rule:evenodd;}techdegree
Roman Gulevskiy
Full Stack JavaScript Techdegree Student 1,122 Points

Can't place elements properly on the page

I want to make a web-form with elements in 2 columns, but sometimes I need one element that should be placed in 1 column (with width of 2 columns).

The problem is I can't place the full-width element (class="full") properly, it has some margin or padding, and it doesn't look well.

Thanx in advance!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css">

        #wrapper {
            max-width: 960px;
            margin: 0 auto;
            padding: 15px 0;
            border: 1px solid #000;
        }

        #form {
            padding: 0 1%;
            margin: 0 0;
        }


        #form li {
            width: 47%;
            display: inline-block;
            min-width: 250px;
            margin: 0 1% 10px;
            border: 1px solid #ccc;
            list-style: none;

        }

        #form .full {
            width: 98%;
            color: red;
        }

    </style>
</head>

<body>
    <div id="wrapper">
        <ul id="form">
                <li>
                    <p>Element</p>
                </li>

                <li>
                    <p>Element</p>
                </li>

                <li>
                    <p>Element</p>
                </li>

                <li class="full">
                    <p>Element</p>
                </li>

                <li>
                    <p>Element</p>
                </li>

                <li>
                    <p>Element</p>
                </li>
            </ul>


    </div>

</body>

</html>

Marilena Beliciu
Marilena Beliciu
12,531 Points

Hi Roman,

My fix to your code is to add a float left to the odd LIs and a float right to the even LIs.

li:nth-of-type(even) {
    float: right;
}

li:nth-of-type(odd) {
    float: left;
}

1 Answer

Andre Difelice
Andre Difelice
18,364 Points
Andre Difelice
Andre Difelice
18,364 Points

Not sure if this is the best fix, all I did was change the measuring unit to em's so it could be responsive

http://prntscr.com/5aqkdg

#form .full {
  width: 56.8em;
  color: red;
  background: yellow;
}