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 mm4
mm4
8,600 Points

Having trouble with div layout

I'm practicing HTML/CSS and am trying to code up something that looks like the header here: http://blueowlcreative.com/wp/aqua/ because I like the layout. I have a couple of questions:

1) Is there a robust, fluid way to put divs side by side? I want to make a header row with a left and a right section but I don't want to confine either or the entire header row to a certain width while floating them.

2) In the right header section, there's a contacts bar and below that, social icons/search bar. How do I make divs stack on top of each other? Is position: relative good to use even when the window resizes?

3) When putting together the social icons and search bar, would it be easier to have them like an unordered list and then make everything inline? Or should I separate the two into different divs and then repeat the process in 1)?

3 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Great! Glad I could help!

And yeah, it doesn't look like the comments are able to be rated. But the answers that led up to them are! =p

Happy coding!

Erik

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

A good solution to each of these issues is indeed to use the float property. Have you experimented with anything yet?

Erik

mm4
mm4
8,600 Points
mm4
mm4
8,600 Points

Yeah, the code's a mess though.

Here's my HTML:

<body>
    <!-- wrapper: entire page, from header to footer -->
    <div id='wrapper'>
        <!-- container: wrapper minus the footer -->
        <div id='container'>
            <header>
                <!-- header-row is everything above the navigation bar -->
                <div class='header-row'>
                    <div class='header-left'>
                        <a href='index.html' title='SI Enterprises'>
                            <img src='images/bluelogo.png' alt='SI Enterprises' />
                        </a>
                    </div>
                    <div class='header-right'>
                        <div class='header-contacts'>
                            <div class="header-mail"><a href="mailto:info@sienterprises.com">info@sienterprises.com</a></div>
                            <div class="header-phone"><a href="tel:tbd">tbd</a></div>
                        </div>

                        <div class='header-social-search'>
                            <!-- a target="_blank" will open the link in a new window or tab -->
                            <div class='header-search'>
                                <form class="search-form" action="http://localhost/sienterprises.com/" method="get">
                                    <input type="text" id="search" value=''>
                                    <button class="button_search">
                                        <img src='images/button_search.png' alt='Search' />
                                    </button>
                                </form>
                            </div>
                            <a target="_blank" href="https://www.youtube.com/channel/sienterprises" title="Youtube" id="header_yt"></a>
                            <a target="_blank" href="http://www.pinterest.com/sienterprises/" title="Pinterest" id="header_pinterest"></a>
                            <a target="_blank" href="https://www.linkedin.com/in/sienterprises" title="LinkedIn" id="header_linkedin"></a>
                            <a target="_blank" href="https://twitter.com/sienterprises" title="Twitter" id="header_twitter"></a>
                            <a target="_blank" href="https://www.facebook.com/sienterprises" title="Facebook" id="header_fb"></a>           
                        </div>
                    </div>
                </div>
            </header>

        </div>
    </div>
</body>

And this is my CSS:

*{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
}


/*Code to Visualize Divs*/
div {
    display: block;
    /*Following code for debugging purposes*/
    border-width: 2px;
    border-style: dashed;
    border-color: black;
}


#wrapper{
    margin: 20px auto;
    text-align: left;
    background: white;
    width: 990px;
}

#container{
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
    /*overflow to stop container from collapsing due to floating child elements*/
    overflow: hidden;
}

/*    HEADER    */

/*Left and Right Header Sections*/

.header-row {
    /*width: 90%;
    float: left;
    margin: 5%;*/
    margin-bottom: 20px;
    /*overflow to stop container from collapsing due to floating child elements*/
    overflow: hidden;
}

.header-left {
    /*width: 460px;
    float: left;
    display: inline;
    margin-right: 10px;
    margin-left: 10px;*/
    width: 45%;
    float: left;
}

.header-right { 
    /*width: 460px;
    float: left;
    display: inline;
    margin-right: 10px;
    margin-left: 10px;*/
    overflow: hidden;
    /*width: 48.6%;*/
    /*margin-left: 5%;*/
    /*margin-right: 0;*/
}


/*Extended Logo*/

.header-left img {
    padding-top: 20px;
    width: 100%;
}



/*Upper Contacts Bar and Search Bar Relative to Each Other*/

.header-contacts{
    height: 20px;
    margin: 20px 0 46px;
    font-size: 12px;
    color: #888888;
    /*position: relative;
    /*width: 100%;*/
}

.header-social-search{
    position: relative;
    width: 100%;
    float:left;
}

/*Topmost Contact Information Bar */


.header-contacts a{
  color: #888888;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: left;
  float: right;
  padding-left: 23px;
  /*background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;*/
}


.header-mail {
    background: url('images/header_mail.png') center;
}

.header-phone {
    background-image: url('images/header_phone.png') center;
    margin-left: 20px;
}




/*Social icons and search bar*/



#header_fb{
    background: url('images/facebook_search.png');
}

#header_twitter{
    background: url('images/twitter_search.png');
}

#header_linkedin{
    background: url('images/linkedin_search.png');
}

#header_pinterest{
    background: url('images/pinterest_search.png');
}

#header_yt{
    background: url('images/youtube_search.png');
}


#search {
    margin-bottom: 0;
    float: right;
    position: relative;
    color: #ccc;
    background: #fbfbfb;
}

The actual thing looks like a complete mess right now. :(

Erik McClintock
Erik McClintock
45,783 Points

Sometimes it can be easier to start from scratch once you hit a point like this. If you get too far in and start making little tweaks all over the place, the code can get unruly very quickly. Here is a link to a very quick, simple little example to show how these containing divs and floats can work together to achieve this type of layout (http://codepen.io/erikmcclintock/pen/gxFqB?editors=110). Again, this is not styled in any fashion but to show the individual divs, and because it's so small you can tweak the rules relatively easily to see what is working and where.

Erik

Erik McClintock
Erik McClintock
45,783 Points

You're on the right track, but try smaller steps and get used to the way that these properties and rules work together before going for a more complex layout. After you've worked with them a few times over, you'll be able to knock layouts like this out in no time, and will be able to more easily debug the problem!

Erik

mm4
mm4
8,600 Points

I decided to start from scratch like you said and boy, is it making things easier! Thanks for the codepen; it made it clearer for me to see the big picture. I definitely got lost in the details, but I'm trying to work it out on a clean slate. Thanks again!

Edit: Hmm, I'd give you "Best Answer" but I can't seem to find the option on your comment.