Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Posted by Omied Badr
.a{fill-rule:evenodd;}techdegree
Omied Badr
Front End Web Development Techdegree Student 5,995 Points

3 cloumn layout

I want to make my 3 column layout inside my main div or wrapper and when I type the code for the 3 column layout it changes, please help?

Lush Sleutsky
Lush Sleutsky
14,044 Points
Lush Sleutsky
Lush Sleutsky
14,044 Points

Please post the code so we can help...

3 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Omied;

Would you mind posting your code here in the forum so folks can take a look? Follow the guidelines in the Markdown Cheatsheet for instructions on how to post code in the forum.

Thanks, Ken

Omied Badr
seal-mask
.a{fill-rule:evenodd;}techdegree
Omied Badr
Front End Web Development Techdegree Student 5,995 Points
Omied Badr
.a{fill-rule:evenodd;}techdegree
Omied Badr
Front End Web Development Techdegree Student 5,995 Points

here is my code for both css and html

body{
    background-color: #999;
}

#container{
    width:70%;
    height:auto;
    border:solid black 2px;
    box-shadow:3px 3px 3px 3px;
    border-radius:10px;
    background-color:#ffffff;
    margin:0px auto;
}

#banner{
    background-color: #CDFFFF;
    height:auto;
    width:auto;
}

#navigation{
    height: 60px;
    border-radius: 10px solid #e3e3e3;
    margin-top: 20px;
    text-shadow: 0.1em 0.1em #333;
    background-color: #39F;
}

#nav{
    list-style: none;
}

#nav ul{
    margin: 0;
    padding: 0;
    width: auto;
    display: none;
}

#nav li{
    font-size: 24px;
    float: left;
    position: relative;
    width: 180px;
    height: 50px;
}

#nav a:link, nav a:active, nav a:visited{

    display: block;
    color: #fff;
    text-decoration: none;
}

#nav a:hover{
     color: blue;
}

#box1{
    border: 2px solid black;
    height: 150px;
    width: 150px;
    background-color: #FFF;
    float: left;
    margin:0 0 10px 10px;
    margin-top:15px;

}

#box2{
    border: 2px solid black;
    height: 150px;
    width: 150px;
    background-color:#FFF;
    float: left;
    margin:0 0 10px 10px;
    margin-top:15px;

}

#box3{
    border: 2px solid black;
    height: 150px;
    width: 150px;
    background-color:#FFF;
    float: left;
    margin:0 0 10px 10px;
    margin-top:15px;

}

and the html is below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Go Maids</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
<div id="container">
<div id="banner">
<div id="logo">
<h1><img src="images/logo2 (1).svg" width="350px" height="350px" /></h1>
</div>
</div>

<nav id="navigation">
            <ul id="nav">
               <li><a href="index.html">Home</a></li>
               <li><a href="about.html">About</a></li>
               <li><a href="services.html">Services</a></li>
               <li><a href="contact.html">Contact US</a></li>
            </ul>
        </nav>

 <div id="box1">
<p>dkljfsldkfjdk</p>
</div>
<div id="box2">
 <p>dsjlkffjkl</p>
</div>
<div id="box3">
<p>dklsjfkdjkj</p>
</div>

</div>
</body>
</html>
Mike Morales
Mike Morales
19,833 Points
Mike Morales
Mike Morales
19,833 Points

In your CSS file in the navigation section your border-radius should be 10px, and not 10px solid E3E3E3. In your HTML file, I found a couple of minor errors. In your image source you have included the opening and closing h1 header tags around your image source. There is also a space between your images/logo2 (1).svg. You might want to double check that? And one more thing, always add your alt=" " in your image source, try to make that a habit.