I need two columns, one responsive, another fixed with 100px width
For example left columns have 100px width and right columns have the remaining width
In this simple code how much to put the width?
<!DOCTYPE html>
<html>
<head>
<style>
.main{
display: table;
clear: both;
width: 100%;
}
#left{
float: left;
width: 100px;
}
#right{
float: right;
/*width: ;*/
background-color: red;
}
</style>
</head>
<body>
<div class="main">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
Since you're already using display: table on the parent, set the children's display to table-cell and give a width to the first one like you did. The second column will automatically take the remaining width.
#left{
display: table-cell;
width: 100px;
}
#right{
display: table-cell;
}
Example : https://jsbin.com/dicuvigaka/edit?html,output
Try this:
#left {
position: absolute;
left: 0;
width: 100px;
}
#right {
position: absolute;
left: 100px;
width: 100%;
}
You can use calc() to calculate the remaining width. Check the browser compatibility table: Can I use calc().
html,
body {
margin: 0;
padding: 0;
}
.main {
width: 100%;
}
#left {
float: left;
width: 100px;
background: lightblue;
}
#right {
float: left;
background-color: tomato;
width: calc(100% - 100px);
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="main">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
Related
I'm learning CSS and I tried to create a simple layout.
I set the "header" to have a width of 100%, the "left" to have a width of 20% and the "right" 80%. But the width of the header is greater than the total width of the left and the right. Why is that and how to fix it?
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Edit
Thanks to your answers and to some reading I get now that the problem is the margin of the body section. When I use body {margin: 0;} the "left" plus the "right" take a bigger place in the page and the "header" takes a smaller place, so their widths are equal.
Another solution with the same result is adding a "container" div around everything with "left: 0; right: 0; position: absolute;".
I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller. If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it?
body {
margin: 0;
}
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 0;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Thanks
When using percentage widths the margin, padding and border are not included in the calculation. So you want to be sure all of those are set to 0 on the corresponding elements.
margin: 0;
padding: 0;
border: none;
Alternatively, you could use the box-sizing property which will make the calculation include padding and border. Then you would only have to account for the margins elsewhere.
box-sizing: border-box;
Here you go:
body{
margin:0px;
}
div {
border-radius: 10px;
}
#wrapper {
padding: 0%;
}
#wrap {
float: left;
position: relative;
width: 100%;
}
#header {
position:fixed;
width:inherit;
z-index:1;
padding:0px;
height:50px;
border-radius:10px;
background-color: #80B7ED;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<html>
<body>
<div id="wrapper">
<div id="wrap">
<div id="header"></div>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
See here jsfiddle
EDIT:
If you wish to add a margin, I'd suggest you add a variable margin, for instance 2% or 3%, and then you substract that quantity from the left column, the right column, or both. And then you set the width of the #wrapp to be 100-2*x %, where x is the amount of margin you added.
Another way is to use overflow: hidden; for parent div and set width:100%; for the child element. This way, more width will be hidden.
Hello my question is about aligning divs. On a website i am working on for fun i have a div and inside that div is a child div. i need the child to be in the middle of the adult div. The left and right are aligning in the middle but it is stuck to the top. If anyone could help me that would be greatly appreciated!
JSFIDDLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="nav">
</div>
<div id="content-background">
<div id="content">
</div>
</div>
<div id="faqs">
</div>
<div id="footer">
<div id="footer-right">
</div>
<div id="footer-left">
</div>
<div id="footer-bot">
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 25%;
height: 50px;
float: left;
background-color: red;
}
#nav {
width: 75%;
height: 50px;
float: left;
background-color: green;
}
#content-background {
width: 100%;
height: 600px;
clear: both;
background-image: url('images/background.jpg');
}
#content {
width: 50%;
height: 300px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#faqs {
width: 100%;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#footer {
width: 100%;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#footer-right {
width: 50%;
height: 150px;
float: left;
background-color: blue;
}
#footer-left {
width: 50%;
height: 150px;
float: left;
background-color: pink;
}
#footer-bot {
width: 100%;
height: 50px;
clear: both;
background-color: green;
}
It seems you want to align the div vertically to the middle as well as horizontally. The child div looks good horizontally, but aligning to the center vertically is a bit trickier.
An easy solution since you know the height of #content-background would be to position #content relative to the parent and then move it down by 150 pixels.
#content {
...
position: relative;
top: 150px;
}
Here's a working fiddle http://jsfiddle.net/ry5xU/3/
Here's a really good breakdown of how you can accomplish true vertical centering:
How to vertically center divs?
You can use margin:auto to show a div at center.
Check out this and this or this might help.
#main_div {position:relative;}
#child_div {position:absolute; right:50%; margin-right:-200px; top:50%; margin-top:-200px;}
you should do this for your css.
when the width and height of your child div is 400px , in "margin-right" or "margin-top" you write -200px on them . It means the half of width with a Minus behind that should be in "margin-right" and the half of height with a Minus behind that should be in "margin-top".
Good luck .
I have a html page with 2 divs and they should resize, but always stay in one row. How can I build this?
I have the following example html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div id="table">
<table>
<tr>
<td>ONE</td>
<td>TWO</td>
</tr>
</table>
</div>
<div id="sidebar">
<p>This is a sidebar</p>
</div>
</div>
</body>
</html>
And the style sheet looks like this:
#content {
width: 100%;
}
#table {
width: 100%;
background-color: red;
display: inline-block;
}
#sidebar {
width: 170px;
background-color: blue;
float: right;
display: inline-block;
}
Using floats and the calc() function
Here is one way of doing it using floats and the calc() function (CSS3):
#content {
width: 100%;
border: 1px dotted gray;
overflow: auto; /* useful for enclosing the floated region */
}
#table {
float: left;
width: calc(100% - 170px); /* modern but not yet widely supported */
background-color: red;
}
#table table {
border: 1px solid yellow;
width: 100%; /* '100%' for full-width; 'auto' for shrink-to-fit content */
}
#sidebar {
float: right;
width: 170px;
background-color: blue;
}
Float your #table and #sidebar to the left and right respectively.
When you float an element, its with will compute to a shrink-to-fit value unless you specify a width value.
If you specify width: 100% on #table, this will force the sidebar to start on a new line.
To allow space for the sidebar, use calc(100% - 170px) to computer the ideal maximum width for the table panel.
The calc() function is supported by the latest browsers, so this solution may not be suitable.
See Demo Fiddle
Change your content css to
#content {
width: 100%;
display:inline-block;
}
but here as your table width is set to 100% how the main div will accept 170px in the same line.
after #table goes beyond 81% it pushes the content to next line
You are giving #content width of 100% so it will take whole space. You will need to adjust both div's width and float #content to left so that it calculates to 100%.
Check out this fiddle...It helps to achieve what you need.
Here's updated css..
#content {
width: 100%;
}
#table {
float: left;
background-color: red;
display: inline-block;
width: 60%;
}
#sidebar {
float: left;
width: 170px;
background-color: blue;
float: right;
display: inline-block;
}
Float:left;
for both divs and then put them in a wrap and then size the wrap to however you want it to look.
.wrap {
width: 500px;
height:800px;
}
So for your code, CSS:
#content {
width: 100%;
}
#wrap {
height: 100%;
width: 100%;
}
#table {
width: 60%;
background-color: red;
display: inline-block;
float: left;
}
#sidebar {
width: 170px;
background-color: blue;
float: right;
display: inline-block;
float: left;
}
HTML:
<body>
<div id="wrap">
<div id="content">
<div id="table">
<table>
<tr>
<td>ONE</td>
<td>TWO</td>
</tr>
</table>
</div>
<div id="sidebar">
<p>This is a sidebar</p>
</div>
</div>
</div>
</body>
I would like to place two divs next to each other. The right div's width is determined by it's content and should be aligned to the right of the container div. The left div's width should span the rest of the page.
I managed to do this with the following code (a minimized version of the original obviously):
<html>
<head>
<style>
#container {
border: 1px solid black;
display: table;
width: 1000px;
}
#left {
display: table-cell;
vertical-align: top;
width: 100%;
}
#right {
display: table-cell;
vertical-align: top;
}
#image {
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
blabla
</div>
<div id="right">
<div id="image">
</div>
</div>
</div>
</body>
</html>
Works perfectly in both chrome and firefox, but in IE, the #right div is shown below the left one.
The idea is that only the #container and the #image have dimensions that are explicitly set. All other dimensions should be inferred from those by clever aligning somehow. The display: table-cell css property accomplishes this nicely, but nothing else seems to do...
Does anyone know a solution? There are a lot of "place div's next to each other" questions already, but all solutions seem to depend on all div's having fixed widths..
Change the CSS this way:
#left {
float: left;
width: 50%;
padding: 0;
margin: 0;
}
#right {
float: right;
width: 50%;
padding: 0;
margin: 0;
}
Let us know if you find some issues in this!
I think you set the
#left{width:600px;float:left};
#right{width:400px;float:left};
your problem solved.
look this one. it works.
<html>
<head>
<style>
#container {
border: 1px solid black;
display: table;
width: 1000px;
float:left;
}
#left {
display: table-cell;
vertical-align: top;
width: 57%;
float: left;
}
#right {
display: table-cell;
vertical-align: top;
float: right;
}
#image {
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
blabla
</div>
<div id="right">
<div id="image">
</div>
</div>
</div>
</body>
</html>
I didn't have IE in my mac. As per i understand write like this:
#container {
border: 1px solid black;
display: table;
width: 1000px;
white-space:nowrap;
}
#left,#right {
display: table-cell;
vertical-align: top;
white-space:normal;
}
#image {
width: 400px;
height: 300px;
background-color: red;
}
I'm having a problem creating a layout that's partly liquid. The layout has to have 100% width and height but it shouldn't have scrollbars (overflow: hidden;).
On the image above shows what I'm trying to achieve. As you can see:
The header has to be fixed - 110px with 100% width.
Two divs wrapped via a container div. The blue one needs to be with fixed width 130px & 100% height, while the green one needs to be with liquid width and 100% height.
Here is my current code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
float: left;
}
#content {
height: 88%;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width: 91%;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div class="spacer"></div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
There are a couple of problems with this code:
It doesn't work on various resolutions (800x600,1024x768, 1280x1024 and etc)
The "content" div doesn't always fill the page to the end.
The green div would go below the blue one if you resize the page to lower resolutions.
I guess I might be doing something TERRIBLY wrong here but I'm not a designer so is there somebody who could point me to "the right way" of solving this problem?
Take a look here http://jsfiddle.net/bmqPV/2/
you have the left set to 100px and the right to 91%, so if 100px is greater than 9% it will go to the next line.
EDIT, here is a new fiddle http://jsfiddle.net/bmqPV/4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
z-index:3;
}
#content {
height: 100%;
width: 100%;
padding: 0;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
width: 100%;
}
#wrapper
{
position: relative;
height: 100%;
width: 100%;}
.contentcontainer {
padding-top:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
My Header
</div>
<div id="content">
<div id="left">
<div class="contentcontainer">Left container</div>
</div>
<div id="right">
<div class="contentcontainer">Right container</div>
</div>
</div>
</div>
</body>
</html>
You can achieve your result through a simple CSS with defining positions in #content & #right for better understanding please see the simple code:-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
{
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
#header {
background: black;
height: 100px;
}
#content {
width:100%;
border:5px solid red;
overflow:hidden;
position:relative;
}
#left {
background: #1664a0;
height: 100%;
width: 130px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width:100%;
position:absolute;
margin-left:130px;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
see the demo:- http://jsbin.com/ajasey/17/edit