I have a wrapper and inside I have 2 divs (left & right). The wrapper takes the height of its content. The left div has a set relative height. What I want is for div right to take 100% of the wrapper height after div left has stretched the wrapper height. How can I achieve this? Thanks in advance.
.wrapper {
width: 100%;
height: fit-content;
background-color: gold;
border:solid 1px red;
}
.wrapper .left {
width: 50%;
height: 20vh;
background-color: pink;
}
.wrapper .right {
width: 50%;
/*something like this*/
height: 100%;
background-color: blue;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
Couple of things here,
Firstly, I am not sure if you actually meant for your right div to be on the right column. As of now, it's rendered below the left.
I assume that's what you wanted, so I'll suggest a fix it accordingly.
Other than that, I think you have the right idea.
Additionally, you do not need the fit-content.
Please let me know if I am missing something.
.wrapper {
width: 100%;
background-color: gold;
border:solid 1px red;
display: flex;
flex-direction: row;
}
.wrapper .left {
width: 50%;
height: 20vh;
background-color: pink;
}
.wrapper .right {
width: 50%;
background-color: blue;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
Related
I have a layout which uses flexbox to position a main content section and a sidebar element beside each other, with justify-content: space-between for consistent spacing within a container, however I need the sidebar on the right to also scroll down the page with the user by using position: fixed, whilst also remaining pinned to the right edge of the container.
Example pen: https://codepen.io/StyleMeLikeOneOfYourFrenchGirls/pen/BazQOLj
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
/*position: fixed;*/
}
<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>
I understand that fixed removes the element from document flow, and thus eliminates the simplicity of the flex layout and the ability to 'contain' something within it's parent element.
I've been able to achieve something close to what I want, but it requires specific values for different viewport widths (e.g. using Bootstrap's offset classes, transform: translateX() or various combinations of margins). These methods are messy though, and don't provide a consistent solution to keeping the sidebar aligned with the edge of the parent container.
Is there a simpler/more elegant solution to this problem?
You can use position: sticky;. It respects the flex and has a fixed purpose.
DEMO:
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
position: -webkit-sticky;
position: sticky;
top: 0;
}
<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>
Please have a look...
body {
margin: 0;
}
.container {
width: 1000px;
display: block;
margin: 0 auto;
}
.content {
background: #999;
height: 100vh;
overflow: auto;
display: flex;
}
.leftContent {
display: flex;
width: calc( 100% - 300px );
}
.rightSidebar {
position: absolute;
right: calc(50% - 500px);
background: #666;
height: 100vh;
width: 300px;
overflow: auto;
}
<div class="container">
<div class="content">
<div class="leftContent">
a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a a a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a aa<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
<div class="rightSidebar">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
</div>
</div>
</div>
Here is a try with minimum impact on your code.
The setup you have limits a bit the options you have, but I think below Pen would be a nice workaround.
.left-content {
height: 1000px;
width: 100%;
max-width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 100%;
max-width: 15%;
background-color: yellow;
position: fixed;
right: 20%;
}
CodePen
Sidebar on the right hand side scrolls down the page with the user by using position: fixed, whilst also remaining pinned to the right edge of the container.
I want for the boxes to be more responsive, and to keep 1:1 ratio all the time.
When I set min-width to the .box1, .box2 they always take the whole width of the .box ! And it is like they don't respond to height?
I don't want to boxes be full width (or height) of the flex items, since i want some space between them, and I don't want them to overflow their .box container,..( I want keep them inside)
I know I can use media queries to resize the .box1,.box2,.box3, .. but is there any other way?
.grid {
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
//margin:0 -40px;
}
/*first two children*/
.grid>.box:not(:last-child) {
background: grey;
width: 50%;
}
.box1,
.box2,
.box3 {
border: 2px solid #111;
width: 100px;
height: 100px;
transform: rotate(-45deg);
text-align: center;
}
.box1,
.box2 {
margin: 0 auto;
}
.box p {
position: relative;
color: white;
}
<div class="wrapper">
<div class="grid">
<div class="box">
<div class="box1">
<p>Here is something !</p>
</div>
</div>
<div class="box ">
<div class="box2"></div>
</div>
<div class="box ">
<div class="box3"></div>
</div>
</div>
</div>
I didnt get your complete query but if you want to make square responsive without adjusting its height manually then use padding hack
.box1,
.box2,
.box3{
width: 100%;
height: 0;
padding-bottom: 50%;
postition:relative
background: red;
}
JSFiddle
HTML:
<div class="leftwrapper">
<div class="left">left div</div>
<div class="middle">middle div</div>
</div>
<div class="right">right div</div>
CSS:
.leftwrapper{
float: left;
width: 75%;
}
.left{
float:left;
background:green;
width: 30%;
max-width: 75px;
}
.middle{
background: blue;
overflow: hidden;
}
.right{
float: right;
background:red;
width: 30%;
max-width: 75px;
}
In the above example, I would like to:
Keep all three divs on the same line when resizing the browser (currently, the right div moves beneath the left),
Make it so the blue/middle div resizes to fill the space between left and right. As it stands, when you expand the browser the margin grows. How do you keep it consistent?
As a note: the structure of the HTML divs is intentional ('leftwrapper' containing two divs, floating alongside the right div), so please no answers involving restructuring of the divs!
I would add a flex parent, and use flex-grow to make the elements grow to fill the available space where you want that to happen.
.flex {
display: flex;
}
.grow {
flex-grow: 1;
}
.middle {
background: blue;
}
.left {
background: green;
width: 30%;
max-width: 75px;
}
.right {
background: red;
width: 30%;
max-width: 75px;
}
<div class="flex">
<div class="leftwrapper flex grow">
<div class="left">left div</div>
<div class="middle grow">middle div</div>
</div>
<div class="right">right div</div>
</div>
Change your CSS to this and it'll work nicely.
.leftwrapper {
float: left;
width: 100%;
max-width: calc(100% - 75px);
}
.middle {
background: blue;
overflow: hidden;
}
.left {
float: left;
background: green;
width: 30%;
max-width: 75px;
}
.right {
float: left;
background: red;
width: 30%;
max-width: 75px;
}
What I've done is change the width of .leftwrapper to 100% but added in a max-width property and used calc() to ensure it's also 75px smaller than 100% of the space it can fill up. That way resizing the viewport ensures it stays on one line nicely.
MDN information about calc().
#j.winslow I just updated the JSFIDDLE http://jsfiddle.net/enRkR/1232/
I add this:
.leftwrapper{
float: left;
width: 100%;
max-width: calc(100% - 75px);
}
This is what you're looking for? Regards!
Consider the following HTML structure,
<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>
with the following CSS:
.floated {
width: 50%;
float: left;
}
#div1 {
height: 300px;
background-color:red;
}
#div2 {
height: 30px;
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
This way, #div1 will take up a 300px tall part of the left side of the page, while #div2 and #div3 will get floated to the right side of the page. How could I set up my CSS, so #div1 and #div2 takes up a single row(of height 300px, the maximum height of the two), and #div3 will be placed right below #div1?
I am not controling the height of these divs, this is dynamic, it is possible that sometimes the first one will be only 20 pixels, and the second one will be 1000 pixels, and the other way around is also a possibility
Here's a fiddle: https://jsfiddle.net/1u55fukj/
You can use Flexbox on parent element (body in this case) and use flex-wrap: wrap. This will always make both div's in same row equal height or equal to height of taller one DEMO
body {
display: flex;
flex-wrap: wrap;
}
.floated {
flex: 0 0 50%;
}
#div1 {
height: 300px;
background-color: red;
}
#div2 {
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>
If there will be only 2 divs in row, then you can try to give clear:left to odd child.
.floated {
width: 50%;
float: left;
}
#div1 {
height: 300px;
background-color: red;
}
#div2 {
height: 30px;
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
div.floated:nth-child(odd) {
clear: left
}
<div class='floated' id='div1'>
</div>
<div class='floated' id='div2'>
</div>
<div class='floated' id='div3'>
</div>
flexbox is your best option i think.
you could use a div container and then use display flex
.container{
height: 500px;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.floated {
width: 50%;
}
#div1 {
height: 30%;
background-color:red;
}
#div2 {
height: 60%;
background-color: green;
}
#div3 {
height: 40%;
background-color: yellow;
}
<div class="container">
<div class="floated" id="div1"></div>
<div class="floated" id="div2"></div>
<div class="floated" id="div3"></div>
</div>
you can also center the 3rd div and a lot more :D. Flexbox have a good crossbrowsing support using -moz-, -webkit- etc,
I am a new learner in web designing and practicing websites. I want to align 2 divs in one line without using float. I have a parent div with width 1400px. I want 2 child divs of width 600px each to align next to each other and have equal margin from both sides. Below is my code. Please suggest.
Also, what changes does float make to DOM? I observed that if I use float I need to specify the height as well? Is it the case or I was making some mistake in understanding the role of float?
<html>
<head>
<title>
My Page
</title>
</head>
<body>
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
</body>
</html>
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: inline-block;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
}
you can do like this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.child1 {
background-color: #666;
width: 600px;
margin: auto;
display: inline-block;
}
.child2 {
background-color: #888;
width: 600px;
margin: auto;
display: inline-block;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
Or you can Improve you css to this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.main div {
display: inline-block;
width: 600px;
margin: auto;
}
.main div.child1 {
background-color: #666;
}
.main div.child2 {
background-color: #888;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
You can use flexbox like this:
.main {
display: flex;
justify-content: space-between;
}
Can be done with:
.main div { display: inline-block; }
Expect a whitespace between the divs.
This should do the trick (at least roughly):
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: table-row;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
display: table-cell;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
display: table-cell;
}
Float is really intended to put a picture (or a similar element) on one side of the page and have the text flow around it. It's often "abused" to pack elements next to each other horizontally, but that creates its own problems.
A lot of the answers you've been given are good, and people have been doing this since CSS became a thing. Another way you can do it, and really whichever method you'd like depends solely on your circumstances is by using position:relative on the parent wrapper, and position:absolute any the child elements.
.wrapper {
border: 1px solid red;
min-height: 50vh;
min-width: 100vw;
position: relative;
}
.wrapper > div {
position: absolute;
}
.wrapper .first {
top: 0;
left: 0;
width: 48vw;
border:1px dotted green;
height:100%;
}
.wrapper .second {
top: 0;
right: 0;
width: 48vw;
border:1px dashed orange;
height:100%;
}
<div class="wrapper">
<div class="first">
This is content number 1
</div>
<div class="second">
This is content number two.
</div>
</div>
Another way is by setting the container div to display as a row, and then have the two child elements be displayed as table cells. Tables were kind of the old-go-to back before CSS became extensive (can you believe there was a time before border-radius?)
.wrapper {
display: table-row;
background-color: red;
width: 100%;
height: 50vh;
}
.wrapper > div {
display: table-cell;
width: 48%;
}
.first {
border: 1px solid orange;
}
.second {
border: 1px dotted green;
}
<div class="wrapper">
<div class="first">
First Child
</div>
<div class="second">
Second Child
</div>
</div>
Really there's a bunch, you just need to figure out which one works best for you.