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

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Byron Holmes
Byron Holmes
2,984 Points
Posted by Byron Holmes
Byron Holmes
2,984 Points

Divs instead of images?

Hi, all. Suppose that I am making a website with the same basic layout as the one in this course. But suppose that, instead of photos, the two columns contain colored divs, basically just squares of color. I understand how to make the width adjust if the screen is made smaller, but how do you get similar behavior for the height? Right now, I have the width attribute set to 45%, but to get the height I want, I have to use a fixed pixel measurement. I'm thinking that you could use a parent div and use relative sizing, but that seems inelegant. Is there a better way?

Thanks!

Code:

HTML

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "utf-8">
        <title>Project 1</title>
        <link rel = "stylesheet" href="style2.css">
    </head>
    <body>
        <header>
            <h1>WEBSITE</h1>
            <h2>ONLINE </h2>
            <nav>
                <ul>
                    <a href = ""><li>Home</li></a>
                    <a href = ""><li>About</li></a>
                    <a href = ""><li>Contact<li></a>
                    <a href = ""><li>FAQ</li></a>
                    <a href = ""><li>Store</li></a>
                </ul>
            </nav>
        </header>
        <div id = "wrapper">
            <section >
                <ul id = "library">
                    <div><a href=""><li>item1</li></a></div>
                    <div><a href=""><li>item2</li></a></div>
                    <div><a href=""><li>item3</li></a></div>
                    <div><a href=""><li>item4</li></a></div>
                    <div><a href=""><li>item5</li></a></div>
                    <div><a href=""><li>item6</li></a></div>
                    <div><a href=""><li><item7<li></a></div>
                </ul>
            </section>
            <footer><h3>Social Media</h3></footer>
        </div>
    </body>
    </html>

CSS

nav li {
    list-style:none;
    display:inline-block;

}

nav a {
    text-decoration: none;

}

section li {

    list-style: none;
}

#wrapper {
    max-width:940px;
    margin: 0 auto;



}

#library{
    margin:0;
    padding:0;
    list-style:none;


}

#library li{
    float:left;
    width:45%;
    height:200px;
    margin:2.5%;

    background-color:red;

}
Byron Holmes
Byron Holmes
2,984 Points
Byron Holmes
Byron Holmes
2,984 Points

Also, I notice that my code did not paste nicely here. What did I do wrong, please? Thanks again for any help...

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi Byron,

I just went ahead and fixed the formatting for you. For future reference, you can enter blocks of code like this:

[Make sure to leave an empty line here]

```html

(your code pasted here)

```

Those are back ticks (found normally right below the ESC key in the upper left of your keyboard), and on the first line, you can enter what kind of code you are pasting (html, css, javascript, php, etc), which will help with the formatting.

Byron Holmes
Byron Holmes
2,984 Points
Byron Holmes
Byron Holmes
2,984 Points

Ryan, THANKS a million! Noted and filed.

2 Answers

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

There is no great way to do this but it can be faked using padding or you can use javascript to calculate the width of the element whenever screensize changes and then set the height to equal that value.

Stackoverflow q&a and fiddle for demo with padding: http://stackoverflow.com/questions/21537806/css-height-same-as-width

Byron Holmes
Byron Holmes
2,984 Points
Byron Holmes
Byron Holmes
2,984 Points

Jeff, thanks! I suspected it was going to be messy. In the interim between posting my question and your response, I thought a bit, and I realized it might be possible to use media queries to just give a fixed height that is acceptable. But I know this will not look smooth. I guess I'd better learn some javascript.

Thanks again!