I want to center a div element and to place another div element just on the right with the same vertical alignment. I don't know how to proceed without centering both elements.
Here is my code.
<div class="container">
<div class="center"></div>
<div class="right"></div>
</div>
.center {
width: 100px;
height: 100px;
margin: auto;
background-color: red;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
}
http://jsfiddle.net/KWsnh/
You could use calc to achieve this:
FIDDLE
.container{
text-align:center;
position: relative;
}
.center {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
top:0;
left: calc(50% + 50px); // (100% - 100px)/2 + 100px (offset) = 50% + 50px
}
PS: Browser support for calc is quite good these days.
Demo Fiddle
HTML
<div class="container">
<div class='vcenter'>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
CSS
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
display:table;
}
.container {
display:table-cell;
vertical-align:middle;
}
.center {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: red;
}
.vcenter {
display:block;
width:100%;
position:relative;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
right:0;
top:0;
}
Related
The image is the goal. I need to position each color correctly within the box. It must also be in the center of the browser. The result I got is exactly what the image is just with words. I'm really looking for a better way to do this because I kind of had to guess the left and bottom pixels. I also know it could have been done better and would really love to learn how.
.border{
border: 2px solid black;
width: 500px;
height: 700px;
margin:25px 450px;
padding: 1px;
}
#one {
background: red;
height:100px;
}
#two{
background: yellow;
height:600px;
width:100px;
}
#three {
background: blue;
height:550px;
width:300px;
position: relative;
left: 100px;
bottom: 600px;
}
#four{
background: yellow;
height: 600px;
width:100px;
position: relative;
left:400px;
bottom: 1150px;
}
#five{
background: green;
height:50px;
width:300px;
position: relative;
left: 100px;
bottom: 1200px;
}
<div class="border">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>
</div>
Personally I'd opt for using percentage-based measurements, so that you only need to update the width and height on .border itself. For the .border, I've gone with vw and vh units for the width and height respectively, so that the size of the table adjusts based on the size of the viewport.
Note that you'll also probably want to make use of classes instead of IDs so you can have more than one table. I've used classes in my example, and also replaced the names to make the location identifiers more obvious.
I'd also opt for creating a container for the #middle and #bottom elements, considering them to be a single 'column'. This way, you can make use of float to align the #left, #middle_container and #right columns next to each other, without having to worry about the width of #bottom.
You can center the entire thing by adding margin: 0 auto to .border, which is shorthand for stating that there shouldn't be any vertical margins, and that the horizontal margins should be automatically calculated (which horizontally centers the element in question).
This can be seen in the following:
.border {
border: 2px solid black;
width: 50vw;
height: 100vh;
padding: 1px;
margin: 0 auto;
}
.top {
background: red;
width: 100%;
height: 20%;
}
.left,
.middle_container,
.right {
float: left;
}
.left {
background: yellow;
width: 20%;
height: 80%;
}
.middle_container {
width: 60%;
height: 80%;
}
.middle {
background: blue;
height: 80%;
}
.bottom {
background: green;
height: 20%;
bottom: 0;
}
.right {
background: yellow;
width: 20%;
height: 80%;
}
<body>
<div class="border">
<div class="top">Top</div>
<div class="left">Left</div>
<div class="middle_container">
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
<div class="right">Right</div>
</div>
</body>
Hope this helps! :)
To extend #Obsidian Age's answer, you could also achieve this by using css flexbox.
More info:
MDN
CSS-tricks
.border {
border: 2px solid black;
width: 50vw;
height: 100vh;
padding: 1px;
margin: 0 auto;
display: flex;
flex-wrap: wrap
}
.top {
background: red;
height: 20%;
flex: 100%;
}
.left,
.right,
.middle_container,
.middle {
height: 80%;
}
.left,
.right {
background: yellow;
flex: 1
}
.middle_container {
flex: 3;
}
.middle {
background: blue;
}
.bottom {
background: green;
height: 20%;
}
<div class="border">
<div class="top">Top</div>
<div class="left">Left</div>
<div class="middle_container">
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
<div class="right">Right</div>
</div>
To center your art you will need to add position,top,left,margin-top, and margin-bottom. to .border;
.border{
position:fixed; /*or absolute*/
top:50%; /* add this */
left:50%; /* add this */
margin-top:-350px; /*half of your height*/
margin-left:-250px; /*half of your width*/
border: 2px solid black;
width: 500px;
height: 700px;
padding: 1px;
}
.border{
position:fixed;
top:50%;
left:50%;
margin-top:-350px;
margin-left:-250px;
border: 2px solid black;
width: 500px;
height: 700px;
padding: 1px;
}
#one {
background: red;
height:100px;
}
#two{
background: yellow;
height:600px;
width:100px;
}
#three {
background: blue;
height:550px;
width:300px;
position: relative;
left: 100px;
bottom: 600px;
}
#four{
background: yellow;
height: 600px;
width:100px;
position: relative;
left:400px;
bottom: 1150px;
}
#five{
background: green;
height:50px;
width:300px;
position: relative;
left: 100px;
bottom: 1200px;
}
<div class="border">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>
</div>
Here is my HTML :
<div id="container">
<div id="red"></div>
<div id="yellow">
<div id="green"></div>
</div>
</div>
Here is my CSS :
#container { height:auto; width:100%; background:orange; float:left; }
#red { height:100%; width:200px; background:red; float:left; position:relative; }
#yellow { height:100%; width:calc(100% - 210px); background:yellow; float:right; position:relative; padding:5px; }
#green { height:300px; width:100%; background:green; }
Here is a sample : https://jsfiddle.net/cc5xL660/
As it is in the jsfiddle, the #red div is invisible. I'm looking for a way to make the #red div visible without a specific height dimension. Of course, I could give a height:300px to the #red div but the #green div is supposed to be dynamic. I would like the #red div to have the same height.
You have to give
position: relative to #container
position: absolute to #red
Your JSFiddle edited: https://jsfiddle.net/cc5xL660/4/
You can use display:flex to do that. Have a look at here
#container {
height: auto;
width: 100%;
background: orange;
float: left;
display:flex;
flex-direction:row;
align-items:stretch;
}
#red {
/*height: 100%;*/
width: 200px;
background: red;
float: left;
position: relative;
}
#yellow {
/*height: 100%;
width: calc(100% - 210px);*/
background: yellow;
float: right;
position: relative;
padding: 5px;
flex:1 0;
}
#green {
height: 300px;
width: 100%;
background: green;
}
<div id="container">
<div id="red"></div>
<div id="yellow">
<div id="green"></div>
</div>
</div>
Fiddle
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'm new in CSS and have not not found the solution for this basic problem. I have 3 divs in one line. The center div must have fixed width and it's position also fixed px from the center. I need auto width for the left and right div to fill the space at the left/right side. Here is my try but the left and right divs are zero width. Thanks for the help!
.fullwidth{
width:100%
height:20px;
}
.left{
background-color:green;
float:left;
height:20px;
width: auto;
}
.center{
background-color:red;
position:absolute;
right:50%;
margin-right:100px;
height:20px;
width:100px;
}
.right{
background:blue;
float:right;
height:20px;
width: auto;
}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
What you're looking for is known as the flexible box model design, it is fairly new so there are some vendor prefix requirements although I have emitted them for simplicity. You may have noticed that there is poor support for Internet Explorer so if that's a concern you may need to look for alternatives. Regardless take a look of it in use:
.fullwidth {
width: 100%;
height: 20px;
display: flex;
}
.left {background-color: green;}
.center {
background-color: red;
width: 100px;
}
.right {background: blue;}
.left,.right {flex: 1;}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
flexbox can do that.
Codepen Demo - Click "View Compiled" for all vendor prefixes
* {
box-sizing: border-box;
}
.fullwidth {
height: 20px;
display: flex;
}
.fullwidth .left,
.fullwidth .right {
flex: 1 0 auto;
}
.left {
background-color: green;
}
.center {
background-color: red;
flex: 0 0 100px;
margin-left: -100px;
}
.right {
background: blue;
}
.line {
/* center point reference for demo only */
position: absolute;
height: 50px;
left: 50%;
width: 1px;
border-right: 1px solid green;
}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="line"></div>
You could use CSS calc function
.fullwidth {
width: 100%;
height: 20px;
}
.fullwidth div {
float: left
}
.left {
background-color: green;
height: 20px;
width: calc(50% - 50px);
}
.center {
background-color: red;
height: 20px;
width: 100px;
}
.right {
background: blue;
height: 20px;
width: calc(50% - 50px);
}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
i need have 3 columns in one row. Column in center is fixed width, but left and right column must be fluid. Also I need open this page with Android and IE8. So it should works and with old browser.
What i need:
My try, but unsuccessful:
.left {
float: left;
width: 100%;
margin-left: -50%;
height: 230px;
background: url('left.png') no-repeat right top;
}
.center {
float: left;
margin-left: -62px;
background: #FDE95E;
width:123px;
height:123px;
background: url('center.png');
}
.right {
float: left;
width: 50%;
height:230px;
background: url('right.png') no-repeat left top;
}
HTML:
<div class="left"><br></div>
<div class="center"><br></div>
<div class="right"><br></div>
<div style="clear: both;"></div>
css
.left {
background: red;
float: left;
height: 500px;
width: calc(50% - 50px);
}
.center {
background: gray;
height: 500px;
width: 100px;
margin: auto;
}
.right {
background: red;
float: right;
height: 500px;
width: calc(50% - 50px);
}
html
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
<div style="clear: both;"></div>
http://jsfiddle.net/usb9sbje/
flexbox (caniuse) fixes this with ease if you don't want to use float.
What you need is a wrapper with display:flex;, set #center to a desired width and then your sides 50% width minus the width of the #center.
html, body {
height:100%;
margin:0;
}
#wrapper {
display:flex; /* Required. */
height:100%;
}
#left, #right {
background:blue;
height:100%;
width:calc(50% - 61px); /* 61 equals width of your #center divided by two. – Required. */
}
#center {
width:122px; /* Required. */
}
<div id='wrapper'>
<div id='left'>left</div>
<div id='center'>center</div>
<div id='right'>right</div>
</div>
Another way, without using calc()
.container {
position: relative;
}
.left, .right {
width: 50%;
box-sizing: border-box;
}
.left {
float: left;
padding-right: 50px;
}
.right {
float: right;
padding-left: 50px;
}
.inner {
background: red;
height: 500px;
}
.center {
background: gray;
height: 500px;
width: 100px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
html
<div class="container">
<div class="left"><div class="inner">Left</div></div>
<div class="right"><div class="inner">Right</div></div>
<div class="center">Center</div>
<div style="clear: both;"></div>
</div>
http://jsfiddle.net/usb9sbje/3/