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

Posted by znzlcrstkk
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points

css positioning

Hi, I have some issues, i want the div with id "lol" insert between div with id "kitas" and div with id "kitasn", there is a way i can do, just adjust kitasn width and paste inside of that div, but i want to know is there another solutions? And the second question, if I want to place div with id "lol" at the bottom of the div with id "kitasn" how i need to do that? heres my code

<div id="naujas">
    <div id="innerbox">
    </div>


    <div id="kitas">
    </div>

    <div id="kitasn">
    <img src="kate.jpg" width="100%" height="15%">
    </div>

    <div id="lol"></div>

</div>

<style>

#naujas {
width: 100%;
height:100%;
background: yellow;
}


#innerbox {
width: 50%;
height: 150px;
position: relative;
background: red;
float:left; 
}

#kitas {
width:50%;
height:150px;
float:right;
background: purple;
position:relative;
}

#kitasn {
width:50%;
height:350px;
float:right;
background: brown;
position:relative;

}

#lol {
width:50%;
height:150px;
float:right;
background: grey;

}
</style>
Raffael Dettling
Raffael Dettling
32,998 Points
Raffael Dettling
Raffael Dettling
32,998 Points

You can nest a div inside another div so the css will adjust the position relativ to the parents-container. This link might be helpfull: (https://www.w3schools.com/css/css_positioning.asp)

And this one is for a flexible modern layout: (https://www.w3schools.com/css/css3_flexbox.asp)

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

With relative positioning, the space for the element is reserved based on where it occurs in the HTML, but you can move it with displacement properties (like "top" and "left"). But I see you're also using "float" which would cause other positioning changes during rendering. You might not want use both at the same time. Or you might consider absolute positioning instead where the normal layout process would disregard the element entirely and you can use the other properties to put it anywhere you like.

Raffael's suggestion of flexbox might be useful if you only need to reposition in one axis using the "order" property.

But I have to wonder why not just change the HTML to place the elements in the desired order?