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 trialByron Holmes
2,984 PointsDivs 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;
}
Ryan Field
Courses Plus Student 21,242 PointsHi 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
2,984 PointsRyan, THANKS a million! Noted and filed.
2 Answers
Jeff Lemay
14,268 PointsThere 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
2,984 PointsJeff, 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!
Byron Holmes
2,984 PointsByron Holmes
2,984 PointsAlso, I notice that my code did not paste nicely here. What did I do wrong, please? Thanks again for any help...