Difficulties in designing 3 columns

Question

Hello I am struggling to design a website with 3 columns underneath the nav menu. I have looked into various different 1 of which partially worked the 'holy Grail'. Could someone please help me with this? I am wanting the left and right column to be equal sizes and the middle column to be around 20% of the page. Here is my code:

<!DOCTYPE html5>
<head>
    <title>BodyWorks Hair and Beauty Salon></title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <div class="grid-container">
        <header class="main-header group">
            <img class="banner" src="img\banner.png" alt="BodyWorks Banner" title="Bodyworks Banner">
            <ul class="main-nav group">
                <li><a href="#">Home</a></li>
                <li><a href="#">The Team</a></li>
                <li><a href="#">Price List</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
    </div>
        </header>
    <div class="grid group">
            <div id="left" class="column">
                        <h1>About Us</h1>
                    <p>At Bodyworks Hair and Beauty Clinic our aim is to make you feel special. <br>
                        We offer a wide range of the latest services and therapies including:
                        <ul>
                            <li>the latest cuts and colours</li>
                            <li>hot stone massage</li>
                            <li>St Tropez tanning</li>
                            <li>luxury manicures and pedicures</li>
                            <li>fast tanning booth</li>
                            <li>personalised gift vouchers</li>
                            <li>special wedding services</li>
                        </ul>

                        To experience our friendly, professional atmosphere then please call us on 02392 486116. Or pay us a visit for more information.

                    </p>
            </div>          
                <div id="center" class="column">
                    <img class="logo" src="img\bodyworks.jpg" alt="Bodyworks Salon picture" title="Bodyworks Salon Picture" style="width:108px;height:180px">
                </div>
                        <div id="right" class="column">
                            <h1>Award Winning Salon and Staff</h1>

                            <p>This salon and it's multi-talented team have been nominated for many awards and in 2013 won Best Success story for businesswoman of the year at the woman of the year awards. We went on to win Beauty Therapist of the year at the Hair and Beauty Awards. We were also nominated for Hair Salon of the year, Beauty Salon of the year. Our stylist Katie Merry was nominated for Stylist of the year, and stylist Eve Hoar was nominated for Colour Technician of the year. </p>
                        </div>      
    </div>
    <footer class="footer">
        <p>&copy;2014 Site designed by Wiggys Web Designs</p>
    </footer>
</body>
</html>

/* Font Face */

@font-face {
      font-family: diavlo;
      src: url(fonts/Diavlo.otf);

}

/* Styling */

body {
  font-family: diavlo;
  background-color: black;
  color: white;
  min-width: 650px;
}

.grid-container {
  min-height: 200px;
}

.grid {
  clear: both;
  padding: 0px;
  margin: 0px;
}

img.banner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}



img.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;

}

/* Navigation Bar */

.main-nav {
  display: table;
  margin: 0 auto;
  text-align: center;
}

.main-nav ul {
  list-style-type: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 50%;
}

.main-nav ul {
  display: inline;
}

.main-nav a {
  float: left;
  text-decoration: none;
  padding: 0 30px;
}

.main-nav li {
  display: inline;
  margin: 15px 10px;
}

a:link, a:visited {
  display: block;
  font-weight: bold;
  background-color: black;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  color: #989a99;
}

a:hover, a:active {
  background-color: #989a99;
  color: black;
}

/* Column Styling */

.grid {
  display: relative;
  float: left;
  margin: 2% 5% 3% 5%;
}

.grid:first-child {margin-left: 0;}

#right {
  width: 30%;
}

#center {
  width: 30%;
}

#right {
  width: 30%;
}

.footer {
  clear: both;
}

/* Clearfix */

.group::before,
.group::after {
  content: " ";
  display: table;
}

.group::after {
  clear: both;
}

.group {
  zoom:1;
}


/* Media Query */

@media (max-width: 768px) {
  .grid-container,
  .main-nav li,
  .banner {
    width: initial;
    height: initial;
    float: initial;
  }

  .banner {
    margin-right: 0;
  }
}

Answer 1 · 2014-10-30T16:06:16Z

October 30, 2014 4:06pm

First thing I notice is that you're not floating the columns. You put the following:

.grid {
    float: left;
}

Really you should be floating the individual columns in the grid like so:

.column {
    float: left;
}

Also, you reference the #right grid twice, which is why the #left grid isn't containing its width to fit the other two columns. So delete the extra #right selector and change it to:

#left {
    width: 30%;
}

Welcome to the Treehouse Community

Looking to learn something new?

Stephen Roberts

Stephen Roberts

Difficulties in designing 3 columns

1 Answer

mobilesuitcake

mobilesuitcake

Stephen Roberts

Stephen Roberts