I want to create a simple two-column layout using four divs. I am restricted and cannot modify the HTML structure. I only can modify the CSS.
I want the second div in the right column to fall directly below the previous right column div. Right now, it pushes to the top of the second left div.
Right now this is what I have in HTML:
<div id="parent">
<div class="left">
Left 1
</div>
<div class="right">
Right 1
</div>
<div class="left">
Left 2
</div>
<div class="right">
Right 2
</div>
</div>
CSS:
.left {
height: 400px;
width: 60%;
float: left;
background-color: red;
display: block;
}
.right {
width: 30%;
float: right;
background-color: green;
display: block;
}
See my fiddle: http://jsfiddle.net/Lun61g7a/2/
Use a flexbox and allow the elements to move to the next "row" when needed
#parent {
display: flex;
flex-wrap: wrap;
}
.left {
height: 400px;
width: 60%;
background-color: red;
display: block;
}
.right {
width: 30%;
background-color: green;
display: block;
}
<div id="parent">
<div class="left">
Left 1
</div>
<div class="right">
Right 1
</div>
<div class="left">
Left 2
</div>
<div class="right">
Right 2
</div>
</div>
Related
I'm trying to create three columns in html with the left column positioned at the left side of the screen and at fixed width, the right side positioned at the right of the screen and at fixed width and the middle column elastic and filling up the remaining width.
I'm trying to NOT use flex if that's possible.
What should the CSS look like?
html
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
css
.container {}
.left {}
.middle {}
.right {}
I've created two simple examples. First one does not use flex as long as you don't want to use it.
Example using calc()
.container > div {
float: left;
}
.left {
width: 100px;
background-color: pink;
}
.middle {
width: calc(100% - 200px);
background-color: blue;
}
.right {
width: 100px;
background-color: yellow;
}
<h1>No flex</h1>
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
Example using flex
.container {
display: flex;
}
.left {
width: 100px;
background-color: pink;
}
.middle {
flex-grow: 1;
background-color: blue;
}
.right {
width: 100px;
background-color: yellow;
}
<h1>Flex</h1>
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
float: left; and float: right can be used, but it has the following downsides:
The middle element needs to be used after the right element.
If elements height is relying on its content then all the elements' height will not be matched until you specify a fixed height. you can see a gray area which is the container in the below example.
.container {
text-align: center;
background: lightgray;
}
.container::after {
content: '';
display: block;
width: 0;
clear: both;
}
.left {
float: left;
width: 150px;
background: #33AFFF;
}
.right {
float: right;
width: 150px;
background: #FFC300;
}
.middle {
margin-left: 150px;
margin-right: 150px;
background: #FF5733;
}
<h2>float</h2>
<div class="container">
<div class="left">left left left left left left left left left left </div>
<div class="right">right right right right right </div>
<div class="middle">middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </div>
</div>
<div>Next element</div>
Or you can use display: table and it's children with display: table-cell.
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 150px;
background: #33AFFF;
}
.middle {
display: table-cell;
background: #FFC300;
}
.right {
display: table-cell;
width: 150px;
background: #FF5733;
}
<h2>display: table & display: table-cell</h2>
<div class="container">
<div class="left">left left left left left left left left left left</div>
<div class="middle">middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle </div>
<div class="right">right right right right right </div>
</div>
<div>Next element</div>
Trying to put one div on the right side, other one on the left.
I have 1 div with 2 divs inside.
float: right to parent div and text/image.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCHBOOK</h1>
</div>
<div class="right">
<h3>Luka Crypto</h3>
<div id="circle"></div>
</div>
</div>
Codepen: https://codepen.io/Cryptooo/pen/rXGdoP
Two divs on opposite sides.
You can achieve this by styling .navigation as a flexbox with justify-content: space-between;:
.navigation {
display: flex;
justify-content: space-between;
}
.left {
background: red;
}
.right {
background: blue;
}
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCHBOOK</h1>
</div>
<div class="right">
<h3>Luka Crypto</h3>
<div id="circle"></div>
</div>
</div>
From your codepen, the .navigation element is a flex container. So, remove the float: right on the .right element and add margin-left: auto to "push" it over to the right side.
.right {
display: flex;
align-items: center;
margin-left: auto;
}
This is recommended from the flexbox spec in Aligning with auto margins
.left {
float: left;
}
.right {
float: right;
}
<div>
<div class="left">
<h3>TWITCHBOOK</h3>
</div>
<div class="right">
<h3>Luka Crypto</h3>
</div>
</div>
I have 3 columns
.bookingTotals.middleRow {
height: 315px;
bottom: 400px;
}
.bookingTotals.row {
height: 400px;
bottom: 0;
margin-left: 920px;
/*margin-right: 55px;*/
}
<div id "myParent">
<div style="float: left; width: 400px;">
//some stuff
<div>
<div style="float: left; width: 400px;">
//some stuff
<div>
<div style="float: left; width: 400px;">
<div style="height:50px;">
//top stuff
</div>
<div class="bookingTotals middleRow">
//middle stiff that fills the gap
</div>
<div class="bookingTotals row">
//bottom stuff that i want fixed to the bottom
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to split the last column into 3 layers where the top and bottom div heights are known. So I want the middle div to fill the space between.
What actually happens is that this footer div is displayed outside myParent as if it had no relation to it. What am I doing wrong?
I took some liberty with your height so it would show better.
Use CSS for everything, not put in the markup. Use classes for that.
I make the assumption you want the text in the last one at the bottom so I added a span around it and used align-self: flex-end; at the flex end for the row.
Background color added for clarity of the solution.
#myParent {
width: 100px;
}
.rowthing {
width: 410px;
}
.holder {
display: flex;
flex-direction: column;
min-height: 350px;
border: solid 1px red;
}
.things {
display: flex;
}
.topstuff {
height: 50px;
background-color: #ddeeee;
}
.bookingTotals.middleRow {
flex-grow: 1;
background-color: #dddddd;
justify-content: space-evenly;
}
.bookingTotals.middleRow span {
align-self: center;
}
.bookingTotals.bottom {
height: 100px;
background-color: #eeeedd;
justify-content: center;
}
.bookingTotals.bottom span {
align-self: flex-end;
}
<div id "myParent">
<div class="rowthing">
//some stuff1
</div>
<div class="rowthing">
//some stuff2
</div>
<div class="rowthing holder">
<div class="things topstuff">
//top stuff
</div>
<div class="things bookingTotals middleRow">
<span> //middle stiff that fills the gap<span>
</div>
<div class="things bookingTotals bottom">
<span>bottom stuff that i want fixed to the bottom<span>
</div>
</div>
</div>
If you use the bottom property you also need to specify position.
I used calc to fill the space. In this way, the height of the middle row will depend on the screen size.
.top-row {
height: 50px;
background: red;
}
.bookingTotals.middleRow {
height: calc(100vh - 400px);
background: orange;
}
.bookingTotals.row {
height: 290px;
background: yellow;
}
<div id="myParent">
<div>
some stuff
<div>
<div style="width: 400px;">
some stuff
<div>
<div style="width: 400px;">
<div class="top-row">
top stuff
</div>
<div class="bookingTotals middleRow">
middle stiff that fills the gap
</div>
<div class="bookingTotals row">
bottom stuff that i want fixed to the bottom
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a flexbox container with two items - which themselves are flex containers (direction column)
html, body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
#outer_wrapper {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:30px;
}
.pane_container {
display: flex;
max-height: 100%;
}
.pane_item {
display: flex;
flex-direction: column;
width: 300px;
}
.pane_scroll {
overflow: auto;
}
.pane_header {
height: 40px;
flex: none;
}
.pane_footer {
height: 40px;
flex: none;
}
.scroll_item {
height: 30px;
margin: 10px;
}
#outer_wrapper { background: grey; }
.pane_item { border: 3px solid black; }
.pane_header { background: red; }
.pane_scroll { background: yellow; }
.pane_footer { background: green; }
.scroll_item { background: orange; border: 1px solid green;}
<body>
<div id="outer_wrapper">
<div class="pane_container">
<div class="pane_item pane_item_1">
<div class="pane_header">header 1</div>
<div class="pane_scroll">
<div class="scroll_item"> Content 1 </div>
<div class="scroll_item"> Content 2 </div>
<div class="scroll_item"> Content 3 </div>
<div class="scroll_item"> Content 4 </div>
<div class="scroll_item"> Content 5 </div>
</div>
<div class="pane_footer">footer 1</div>
</div>
<div class="pane_item pane_item_2">
<div class="pane_header">header 2</div>
<div class="pane_scroll">
<div class="scroll_item"> Content 1 </div>
<div class="scroll_item"> Content 2 </div>
<div class="scroll_item"> Content 3 </div>
</div>
<div class="pane_footer">footer 2</div>
</div>
</div>
</div>
</body>
The idea is that when the outer wrapper's height is reduced, each item has an inner div that scrolls vertically. So far so good. (Resizing the results pane in the fiddle)
https://jsfiddle.net/bckquv17/7/
However I would like each item to shrink to fit its content rather than expand to the tallest. To do this, I gather, I can add align-items:flex-start to the main flex container.
When I do this, the flex items do indeed shrink, but are no longer constrained by the outer wrapper, and thus they overflow rather than produce inner scrolls.
https://jsfiddle.net/bckquv17/9/
How do I set it up such that the flex items shrink to their content and also do not overflow when the outer wrappers height is reduced?
We try to place a horizontally centered image in the middle of a web page and place some words on the right side of the image.
┌───────────────────────────────────┐
│ <Picture> <Words> │
│ │
└───────────────────────────────────┘
The HTML is as follows currently:
<div class="mid1"><img src="img/pic1.jpg"></div>
<div class="mid2">Hello, how are u</div>
How to place text on the right side of a horizontally centered image by using CSS?
use flex to divide the screen
<div class="row">
<div class="side">
</div>
<div class="middle">
<img src="">
</div>
<div class="side">
text
</div>
</div>
css
.row {
display: flex;
width: 100%;
}
.row .middle img {
border: 1px solid black;
width: 100px;
height: 100px;
}
.row .side {
flex: 1 0 auto;
padding: 0 10px;
}
.row .middle {
flex: 0 1 auto;
}
see fiddle
note that flex: 1 0 auto; means that the cell will grow as needed but not shrink, flex: 0 1 auto; the opposite. So the middle cell will be as wide as it's content and the sides will fill the rest
https://jsfiddle.net/11h8gn8s/
This is also works:
<div class="wrapper">
<img src="http://placehold.it/350x150">
<div class="text">
<p>
Words
</p>
</div>
</div>
.wrapper {
position: relative;
text-align: center;
}
.text {
display: inline-block;
position: absolute;
}