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!
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
Kenny Parewijck
4,602 PointsHow can i get these blue divs with 100% width on top of the red div with 100% width, margin 1em?
Hello
Can anyone show me an example of how I can get these blue divs on top of the red one? the blue divs have to reach from left to right and the red one has to have a margin 1em and horizontal center.
Jennifer Nordell
Treehouse TeacherRan ShemTov is correct. We really need a picture or better description of how it should look. That being said, if you're trying to do what I think you're trying to do then you should be able to put the blue divs inside the red divs and set the width: 100%. See if that does what you want it to do. And your code would be helpful, as mentioned before.
4 Answers
Stephan Olsen
6,650 PointsYou don't need to use position absolute, no. You should place the blue divs inside of the red div. That way it they will be pushed down according to the content of the div. As for the height of the blue divs, you can either set it yourself, or it will grow as you add content to it. I made a codepen here for you to see, use margin to adjust the distance between the divs.
Kenny Parewijck
4,602 PointsHi, I tried again and it kind a works like this i think. I added the code below. Could you guys check this please?
One important question:
Is there another solution to do this without using the position relative and absolute combination? Just using static, display or float position methods?
because now I have to add manually the height for some elements and I prefer that the elements adjust their height to the content inside it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/positionproblem.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="totalwrapper">
<div class="reddiv">
<h1>My work</h1>
</div>
<div class="bluediv_one">
</div>
<div class="bluediv_two">
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
border: 0;
}
.totalwrapper {
position: relative;
border: 5px solid black;
height: 500px;
}
.reddiv {
position: absolute;
background: red;
width: calc(100% - 2em);
height: calc(500px - 4em);
margin: 1em;
text-align: center;
padding-top: 2em;
}
.reddiv h1 {
background: green;
border: 3px solid black;
display: inline-block;
padding: 0.5em 1em;
}
.bluediv_one {
position: absolute;
background: blue;
width: 100%;
height: 130px;
top: 150px;
}
.bluediv_two {
position: absolute;
background: blue;
width: 100%;
height: 130px;
top: 320px;
}
Kenny Parewijck
4,602 PointsYes that would work. But the problem is that i won't be able to let the blue divs reach to the edge of the screen and give the red div a margin. Of you put the blue divs inside the red than the blue divs Will reach to the edge of the red div, not the body.
Stephan Olsen
6,650 PointsAhh, I guess I misunderstood you. You could give the divs negative margin. Since the red div has a margin of 1em, you can just apply -1em margin to the blue divs: codepen
Kenny Parewijck
4,602 PointsAllright! Super man, Thanks a lot!
This is so simple.. Why didn't i see this.
Ran ShemTov
14,148 PointsRan ShemTov
14,148 PointsCan you make a photo of the desired outcome vs the current outcome?
Also, posting your code will allow us to see what you're doing wrong and what needs fixing