I'm making a website with a "page" div, and inside that contains the left div "navigation" and the right div "content". I want to make the height of the "page" div (so the background matches) equal to the height of the tallest div, either "navigation" or "content".
How would I go about doing this?
write like this
html:
<div class="page">
<div class="navigation"></div>
<div class="content"></div>
</div>
css:
page{overflow:hidden}
.navigation, content{float:left}
I'm guessing you're floating the other divs, otherwise this would always be the case. You can either float the parent div as well, or add a <div style='clear: both'></div> just before the end of the parent div. Either of these techniques will cause the parent div to be as big as its children.
EDIT: whoops, missed the end tag :)
This will help you
HTML
<div class="page">
<div class="navigation">i am navigation</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est maiores, ex? Mollitia assumenda veniam aliquid commodi ex, libero in quia perspiciatis sint voluptatibus soluta exercitationem quas quos repudiandae deserunt obcaecati.</div>
</div>
CSS
.page {
background-color: #000;
}
/* for clearfix*/
.page:after{
content: "";
display: table;
clear: both;
}
/* for clearfix end*/
.navigation,.content {
float: left;
}
.navigation {
width: 20%;
background-color: #cd6a51;
}
.content {
width: 80%;
background-color: #4CAF50;
}
Related
I have a container centered with a max width as follow:
#container {
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
Now I want to create a new div just below the contained one, but I want this new div to align to the left and expand beyond the right side of the container. Something like that:
|||||||||||||||||||||||||||||||||||| #container
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| #div 2
The difficulty is that #container margins are auto, so how can I force #div to follow #container left margin as the browser resizes?!
NOTE: I am looking for a pure CSS solution WITHOUT JAVASCRIPT
EDIT: It was not clear in my explanation but, my goal was to make the #div ADJACENT to the #container. Like this:
<div id="container"></div>
<div id="div"></div>
I ended up refactoring my html to use #bananabran solution with absolute positioning which simply uses parent-child structure:
<div id="container">
<div id="div"></div>
</div>
You don't have to force the div to follow its container's left margin. Divs naturally start at the top-left of their container (unless otherwise specified or affected by). You also do not need to use Grid or FlexBox. CSS3, and even CSS2 can do this natively.
See working CodePen example: https://codepen.io/bananabrann/pen/QWWdXQZ
Assuming you have no other code affecting your code...
<div id="container" />
<div id="my-div" />
#container {
background-color: blue;
position: relative;
margin: 0 auto;
width: 900px;
height: 300px;
}
#my-div {
background-color: red;
position: absolute;
bottom: 0;
width: 500px;
height: 20px;
}
CSS-Grid can do that:
.wrap {
display: grid;
grid-template-columns: 1fr minmax(auto, 400px) 1fr;
/* 400px for demo purposes */
}
.container {
padding: 1em;
background: pink;
grid-column-start: 2;
}
.wide-r {
padding: 1em;
background: lightgreen;
grid-column: 2 / span 2;
}
<div class="wrap">
<div class="container">Container
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, similique, maxime aspernatur dolorum quod recusandae possimus fuga blanditiis laudantium delectus quis magni. Veniam, consequuntur dolores facilis cupiditate fugiat ullam aspernatur!
Corporis excepturi quos esse voluptatem voluptatibus corrupti ea, tempora culpa magni, hic aspernatur pariatur molestias itaque doloremque assumenda ad fugiat!</p>
</div>
<div class="wide-r">Wide Right</div>
</div>
In this example I was able put two divs on each other at the bottom of their parent, but only because I knew the height of last div. The first one was moved a bit to the top. What if the height of #second is dynamic? How can we make them sit on each other at the bottom of parent with dynamic heights? Is it even possible with css? Please do not post JavaScript or jQuery versions.
You can use Flexbox. With justify-content: flex-end and you can move content to end of parent element, so if you want to position some other child element on top of parent you can use margin-bottom: auto. This applies if you set flex-direction: column on parent.
.content {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.main {
margin-bottom: auto;
border: 1px solid black;
}
.box {
background: lightblue;
margin: 5px;
}
<div class="content">
<div class="main">Lorem ipsum dolor.</div>
<div class="box">One</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati vel molestiae dolores, ad, nulla harum tenetur minima aperiam debitis id atque fugit, modi error et magni eius repellendus saepe. Vero?</div>
</div>
You can wrap both of them in a div and set position absolute style for that div rather than applying them individually..
working [Fiddle][1]
[1]: https://jsfiddle.net/gd5pqky7/
Can anyone tell how can I make right top container and right bottom container to have the same height and to split the red container 50-50% vertically. No matter what is the content inside. I tried stretching content and have them wrapped while keeping flex-direction: row to keep same height for items but I'm lost.
What I expect: right top container grows the same height as right bottom which also results the left container growing automatically of course.
This is what I have so far: http://jsbin.com/rozoxoneki/edit?html,css,output
.flex{
display: flex;
border: 5px solid red;
&-child{
background: green;
border: 2px solid yellow;
flex: 1;
}
}
.flex--vertical{
flex-direction: row;
flex-wrap: wrap;
> .flex-child{
min-width: 100%;
}
}
<div class="flex">
<div class="flex-child">
left
</div>
<div class="flex-child flex flex--vertical">
<div class="flex-child">
<h1>right top</h1>
</div>
<div class="flex-child">
<h1>right bottom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
</div>
</div>
</div>
The accepted answer is not ideal for the use of flex properties, because it can all be done without the need for min-height or max-height
I've cleaned up the example fiddle and removed non-essential css styles to show which flex properties are being used here.
In order to get evenly spaced top/bottom divs, you need to either specify the proper value for flex-basis, or let flex work itself out. Assuming that the parent's display is set to flex with a column orientation, the combined flex style can get us there easily:
.half-containers {
flex: 1;
}
see more on flex styling and the flex-basis property
Intuitively one would expect that this would work just with a flex-direction: column for the main container and the left container's height set to 100%.
Instead all browser do this: (this is a quote from another stackoverflow question)
How is it possible that all major browsers got the flex container to
expand on wrap in row-direction but not in column-direction?
So what you can do is wrap the two right containers into a new one:
Like this HTML - schema:
<div class="main-container">
<div class="left-container">Left container</div>
<div class="right-container">
<div class="half-containers">Top right</div>
<div class="half-containers">Bottom right</div>
</div>
</div>
Here is a jsfiddle as an example how you could style it for the expected result.
In this example the 'main-container' is set to 50% width and 75% height of the body.
Building on Felipe's answer, here is an even more minimal example of how to split a single flex container in half vertically. Each of these styles has been confirmed to be significant and necessary, except for the two at the bottom marked optional.
(What got me was that every parent element needs to have a height: 100% set, or the whole thing breaks.)
HTML
<div id="container">
<div class="row">This is the top.</div>
<div class="row">This is the bottom.</div>
</div>
CSS
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
flex: 1;
}
/* optional: get rid of body margin. makes look nice. */
body {
margin: 0;
}
/* optional: shade the bottom row */
.row:nth-child(2) {
background: #bbb
}
Working CodePen here:
https://codepen.io/rbrtmrtn/pen/NyxeJE
we can use flexbox concepts to split equally between two div with the parent in the following way
* {
width: auto;
height: 100%;
}
.row {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.col {
flex: 1;
margin: 5px;
border: solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Other page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae
expedita ipsum nobis praesentium velit animi minus amet perspiciatis
laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
</div>
</div>
</body>
</html>
I am well aware of the concept of "overflow" in HTML/CSS. But here I am stuck at a very simple issue.
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
}
section {
width: 70%;
text-align: justify;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section</section>
</div>
My wrapper div consists of aside and section.I tried to align them side by side with total width of the container. But it always appear that section overflows.I wonder why? The total width of aside plus section has never crossed width of its wrapper container.It only works if I put overflow:hidden in the section.
All you need to do to overcome the effect of the section overflowing is to set overflow to auto on the section. Now you will not need to set float on the section,...
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
background: green;
}
section {
width: 70%;
text-align: justify;
overflow:auto;
background: red;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.</section>
</div>
but be aware of the fact that if the content (any child elements) of section are extending the boundary of section will cause scrollbars on the section. So keep that in mind. You could as well use overflow:hidden which will work as well in your situation, but then any content that exceeds the boundary of section will be hidden. In case of overflow:hidden you could do the following to prevent this behavior. An example with an image as a child element of section could look like this.
#wrapper {
width: 100%;
}
aside {
width: 30%;
text-align: justify;
float: left;
background: green;
}
section {
width: 70%;
text-align: justify;
background: yellow;
overflow:hidden;
}
section img {
width:100%;
height: auto;
}
<div id="wrapper">
<aside>Aside</aside>
<section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.
<img src="http://placehold.it/1000x1000" />
</section>
</div>
I have 3 div's, 200px,300px and 200px how can I align them side by side, all the examples I have seen only include 2. I have Div1,Div2 working correctly but Div3 for some reason slides under Div1 lie this picture
This is my code
<div style=" border-right:1px solid black; width:200px; float:left; position:relative; ">
//div1
</div>
<div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;">
//div2
</div>
<div style=" float: left; width: 200px;position:relative">
//div3
</div>
The Div1 has the shorter content on it, how can I make the border to the right as long as the border in Div2?
All the elements in one line
Wrap the div elements in a wrapper:
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
Then set the width of the wrapper, and float all three divs:
#wrapper {
width:700px;
clear:both;
}
#first {
background-color:red;
width:200px;
float:left;
}
#second {
background-color:blue;
width:300px;
float:left;
}
#third {
background-color:#bada55;
width:200px;
float:left;
}
Also, use IDs and/or classes, and keep the CSS separate from the HTML. This makes the code easier to read and maintain.
The fiddle.
All elements in one line, same height
To accomplish the "same height" part, you can use display:table, display:table-row, and display:table-cell to get matching heights. It uses an extra div, so the HTML looks like:
<div id="wrapper">
<div id="row">
<div id="first">first</div>
<div id="second">second<br><br></div>
<div id="third">third</div>
</div>
</div>
The floats can then be removed, so the CSS looks like:
#wrapper {
display:table;
width:700px;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:200px;
}
#second {
display:table-cell;
background-color:blue;
width:300px;
}
#third {
display:table-cell;
background-color:#bada55;
width:200px;
}
The fiddle.
The Flexbox Way
If you're only supporting newer browsers (IE 10 and up), Flexbox is another good choice. Make sure to prefix for better support. More on the prefixes can be found here.
The HTML
<div class="container">
<div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>
The CSS
.container {
display:flex;
justify-content:center;
}
.container > div {
margin:10px;
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The Codepen.
The Grid Way
You can accomplish this with grid now, too, though browser support might be an issue if you're supporting older browsers. It's the same HTML as with the flexbox example, with just different CSS:
The CSS
.container {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 10px;
width:700px;
}
.container > div {
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The codepen.
The HTML code is
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.