I have this situation:
I want the table on the right side to be at the same height as the form on the left side.
Here is my CSS:
.left {
height: auto;
width: 550px;
}
.right {
height: auto;
width: 550px;
padding-left: 40px;
}
.innerRight {
height: auto;
}
.middle {
height: auto;
position:absolute;
left:50%;
top:17%;
bottom:15%;
border-left:1px solid grey;
}
.left, .right {
display: inline-block;
}
How can I do this?
I used floating, but then the height doesn't adjust automatically, so I can't used it.
You could give them both position:absolute; then position them with top, left, right, ect..
Without your actual HTML code, here is an example that might help you by using the table-row, table-cell css property.
.wrap {
overflow: hidden;
width: 250px;
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.left {
width: 50%;
display: table-cell;
background-color: yellow;
}
.middle {
border-left: solid 1px red;
width: 1px;
display: table-cell;
}
.right {
width: 50%;
background-color: orange;
display: table-cell;
}
<div class="wrap">
<div class="row">
<div class="left">Lorem</div>
<div class="middle"></div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
Related
This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 6 years ago.
How can i make 3 divs side by side. where div1 would be extreme left ,div3 would be extreme right and div2 in the middle.
I know this can be done by display:flex and justify-content:space-between ,but i am looking for an approach without flex.
Here is my approach ,but could not achieve it successfully.
I tried to make all div's display:inline-block and float:left and float:right to the two extreme divs and for the middle one i tried margin:auto,but looks like it is not respecting it
Please help
.container {
border: 1px solid;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
#div1 {
float: left;
}
#div3 {
float: right;
}
#div2 {
margin: auto;
}
<div class="container">
<div id="div1"></div>
<div id="div2">he</div>
<div id="div3"></div>
</div>
try this one. position: absolute;
.container {
border: 1px solid;
position: relative;
overflow: hidden;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
#div1 {
float: left;
}
#div3 {
float: right;
}
#div2 {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div id="div1"></div>
<div id="div2">he</div>
<div id="div3"></div>
</div>
this is what your code will be
.container {
border: 1px solid;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
#div1 {
float: left;
background-color:red;
}
#div3 {
float: left;
background-color:green;
}
#div2 {
float: left;
background-color:yellow;
}
and
<div class="container">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
Kindly check below CSS see if this is what you want:
.container {
float: left;
width: 300px;
border: 1px solid;
}
#div1 {
float: left;
width: 100px;
background-color: red;
}
#div2 {
float: left;
width: 100px;
background-color: green;
}
#div3 {
float: left;
width: 100px;
background-color: blue;
}
<div class="container">
<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</div>
<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat.</div>
</div>
.container {
border: 1px solid;
position: relative;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: block;
}
#div1 {
float: left;
}
#div3 {
position: absolute;
right: 0;
top: 0;
}
#div2 {
margin: auto;
}
<div class="container">
<div id="div1"></div>
<div id="div2">he</div>
<div id="div3"></div>
</div>
Don't use float and inline-block together. This will work:
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
.container {
width:100%;
}
#div1, #div2, #div3 {
height: 50px;
background: red;
display: inline-block;
width:33.33%;
margin-right:-4px;
}
If you want to style the divs individually then target them individually
Hi I have been having a problem with coding my layout I want to have my sidebar stay the same with regardless of screen size, but I also need my content area to be fluid. The header stays at the top which is what I want the problem is the footer I need it to stay always at the bottom and the full width of the content area. If anyone can help it would be muchly appreciated.
Here is my code.
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
}
#left {
width: 20%;
height: 100%;
float: left;
background-color: red;
}
#right {
float: left;
width: 80%;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 80%;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Use inline-block over float:left to avoid problems with clearings, but when using inline-block better use vh over % to fill the viewport.
And to have a fixed sidebar, just give it a fixed width and use calc to calculate the remaining space.
you can do something like this:
Snippet
html,
body {
height: 100vh;
margin: 0;
}
#content {
width: 100vw;
font-size: 0; /* fix inline-block gap */
}
#content > div {
font-size: 16px; /* revert font-size 0 */
}
#left {
width: 150px;
height: 100vh;
display: inline-block;
vertical-align: top;
background-color: red;
}
#right {
display: inline-block;
width: calc(100vw - 150px);
height: 100vh;
background: green
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: calc(100vw - 150px);
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Here's what you should do :
First, replace the float:left; with display: table-cell; for your #left and #right selectors.
Then, use display: table; for your #content selector.
Then, remove the width: 80%; of your #right and #right footer selectors
Add right : 0; to your #right footer selector
Finally, set the left of your footer and the width of your sidebar to the same fixed with and you're there.
The beauty of this approach, is that it also works on IE8 and other browsers that do not have support for calc().
A demo :
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
display: table;
}
#left {
width: 100px;
height: 100%;
display: table-cell;
background-color: red;
}
#right {
display: table-cell;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
right : 0;
left : 100px;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
See also this Fiddle.
I want to create the following layout:
where the blue block is an image and the red and green blocks contain vertically centered text. The container needs to have position:fixed, the image is sized dynamically so that its height is set to the height of the container and the red and green boxes are of equal height and fill the remainder of the container horizontally.
I initially tried using divs:
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
background-color: red;
}
.imgContainer {
height: 100%;
float: left;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
background-color: yellow;
text-align: right;
display: table;
table-layout: fixed;
float: right;
}
.row1 {
height: 50%;
width: 100%;
display: table-row;
}
.row2 {
height: 50%;
background-color: blue;
display: table-row;
}
span {
display: table-cell;
vertical-align: middle;
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
This worked fine for the image but I couldn't figure out how to get the red and green divs to fill the remaining width satisfactorily.
My second attempt was based around tables but, again, I don't seem to be able to get the widths correct:
body {
background-color: red;
padding: 0;
border: 0;
margin: 0;
}
div {
background-color: yellow;
height: 15vh;
width: 100vw;
position: fixed;
}
table {
height: 100%;
width: 100%;
background-color: blue;
border-collapse: collapse;
table-layout: fixed;
}
tbody {
height: 100%;
width: 100%;
background-color: purple;
}
tr {
height: 50%;
width: 100%;
background-color: green;
padding: 0;
}
tr:last-child {
background-color: yellow;
}
td {
height: 100%;
padding: 0;
white-space: nowrap;
}
td:last-child {
max-width: 100%;
}
img {
max-height: 100%;
display: block;
}
<div>
<table>
<tbody>
<tr>
<td rowspan="2">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<tr>
<td>
More text.
</td>
</tr>
</tbody>
</table>
</div>
I have also had problems ensuring that both red and green sections remain at 50% of the total height, regardless of content.
How can I get either of these to work? Or is there a completely different approach that can work?
You don't say what your target market is, but since in most my work I only have to worry about the latest browser versions, this answer makes use of the new CSS flexbox. If you need compatibility with older browsers, see the 2nd set of code below.
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.imgContainer {
height: 100%;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
width: 100%;
}
.row1 {
background-color: red;
}
.row2 {
background-color: green;
}
.row1,
.row2 {
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
Below is a solution that works in older browsers, except IE9 and below where the text will not be properly centered vertically. If that's a concern, you might be able to find something that works on this page, but not knowing all your limitations, I was unable to select the right solution.
body {
padding: 0;
margin: 0;
border: 0;
}
.container {
height: 15vh;
width: 100vw;
position: fixed;
}
.imgContainer {
height: 100%;
float: left;
}
.imgContainer img {
height: 100%;
}
.textContainer {
height: 100%;
}
.row1 {
height: 50%;
background-color: red;
}
.row2 {
height: 50%;
background-color: green;
}
span {
right: 0; /* right-justify */
}
.row1 > span {
position: absolute;
top: 25%; /* put the top 25% down within .container - the first non-static ancestor element */
transform: translateY(-50%); /* nudge the line up half it's height */
}
.row2 > span {
position: absolute;
top: 75%;
transform: translateY(-50%);
}
<div class="container">
<div class="imgContainer">
<img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
</div>
<div class="textContainer">
<div class="row1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="row2">
<span>More text.</span>
</div>
</div>
</div>
This question already has answers here:
CSS two divs next to each other
(13 answers)
Closed 7 years ago.
Hello I'm trying to display 3 div elements inline with each other and does not resize even if you change the size of the browser how do I go about it?
How it should look like:
Code:
body {}
#wrap {
width: auto;
margin: 0 auto;
border: 0px solid;
height: 200px;
display: block;
}
#one {
width: 40%;
float: left;
background: red;
}
#two {
background: yellow;
}
#three {
width: 40%;
float: inherit;
background: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
Check this fiddle
#wrap::after {
display: block;
height: 0px;
clear: both;
float: none;
}
#wrap div {
float: left;
word-break: break-all;
}
#one {
width: 40%;
background-color: red;
}
#two {
width: 20%;
background-color: yellow;
}
#three {
width: 40%;
background-color: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
#two and #three(inherits from parent which is none) do not have float:left and you should give width to those element. For example, here I give width:32% to all div elements(#one, #two, #three).
.fl-l
{
float:left;
word-break: break-all;
width: 32%;
}
#wrap{
width:auto;
margin:0 auto;
border:0px solid;
height:200px;
display:block;
}
#one {
background:red;
}
#two {
background:yellow;
}
#three {
background:blue;
}
<div id="wrap">
<div id="one" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
To fix the width, set an absolute value to the wrap element.
body {}
#wrap {
width: auto;
margin: 0 auto;
border: 0px solid;
height: 200px;
word-break: break-all;
font-size: 0;
}
#wrap > div {
height: 100%;
display: inline-block;
overflow: auto;
font-size: 14px;
}
#one {
width: 40%;
background: red;
}
#two {
width: 20%;
background: yellow;
}
#three {
width: 40%;
background: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
I want to create the following three column layout. The middle column will be of variable size and be centered. The left and right column will grow or shrink to meet the edge of the middle column and the edge of the outer parent div. It should look like this.
-------------------------------------------------------------
| Size: X | Variable Size | Size: X |
-------------------------------------------------------------
I have tried a few different methods but none have worked.
EDIT: To clarify I'm trying to achieve the effect of a header that is centered with two horizontal lines on either side of the text.
https://css-tricks.com/line-on-sides-headers/
I wanted to see if it was possible to do with three nested divs.
There are a couple different methods you could take. Actually, 5 that I can think of.
For the next few examples, the markup is this:
<div class="container">
<aside class="fixed column"></aside>
<main class="fluid column"></main>
<aside class="fixed column"></aside>
</div>
Global CSS
.fixed {
width: 100px;
}
.fluid {
calc(100% - 200px); /* subtract total fixed width of the sidebars */
}
Flexbox:
.container {
display: flex;
}
.container .column {
flex: 0 1 1;
}
Float:
.container:after {
content: '';
clear: both;
display: table;
}
.container .column {
float: left;
}
Table:
.container {
display: table;
}
.container .column {
display: table-cell;
}
Inline-Block:
.container .column {
display: inline-block;
}
.container .column:not(:first-child) {
margin-left: -4px;
}
Absolute:
.container {
position: relative;
}
.container .column {
top: 0;
position: absolute;
}
.container .fluid {
left: 100px; /* width of 1 fixed sidebar */
}
.container .fixed:last-child {
right: 0;
}
Here's a link to the codepen :)
http://codepen.io/akwright/pen/OPvwLv
<div>
<table>
<tr>
<td width="20%">COLUMN 1</td>
<td width="*">COLUMN 2</td>
<td width="20%">COLUMN 3</td>
</tr>
</table>
</div>
Just use display table and table-cell.
Don't use actual tables unless you have tabular data, it is not a best practice and hard to make responsive.
.table{
display:table;
width:100%;
}
.table-cell{
display: table-cell;
text-align: center;
}
.cell1{
background-color: red;
}
.cell3{
background-color: blue;
}
<div class="table">
<div class="table-cell cell1">123</div>
<div class="table-cell cell2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut </div>
<div class="table-cell cell3">321</div>
</div>
*{
padding: 0;
margin: 0;
}
.table{
display: table;
width: 100%;
max-width: 400px;
margin: 25px auto;
border-top: 1px dashed #222;
border-bottom: 1px dashed #222;
}
.table > div{
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
border-right: 1px dashed #222;
}
.table > div:nth-child(1){
border-left: 1px dashed #222;
}
.table > div:nth-child(1),
.table > div:nth-child(3){
width: 20%;
}
<div class="table">
<div>cell</div>
<div>cell</div>
<div>cell</div>
</div>
According to
The left and right column will grow or shrink to meet the edge of the
middle column and the edge of the outer parent div.
You simply want to have each column in % . The easiest way to do seems to be :
<html>
<head>
<title>test</title>
<style>
.side {
width: 20%;
float: left;
background-color: red;
height: 100%;
}
.middle {
width: 60%;
float: left;
background-color: blue;
height: 100%;
}
</style>
</head>
<body>
<div class="side"> </div>
<div class="middle"> </div>
<div class="side"> </div>
</body>
</html>