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;
}
Related
I'm kinda stuck on the CSS for a home project I'm doing. Currently I'm working on a header, or 'top menu bar'. On each side of the viewport there are a button or two with a fixed px dimension. These L and R side div's are both set to float L and R, and are set as display:block;.
Now what I'm trying to get is that the 'header-center'-div will float on the same line in the center between these L and R div's. And all content within it should be centered as well. The last thing I'm trying to do is the max. width of the center div may (dynamically) not be more then what is left of the viewport width minus what is used for the L and R div (so everything stays on the same height).
How can I get the result I want for this??
<header>
<div id="header-left"></div>
<div id="header-center"></div>
<div id="header-right"></div>
</header>
#header-left {
width: 160px;
height: 80px;
display: block;
float: left;
}
#header-center {
height: 80px;
display: block;
overflow: hidden;
}
#header-right {
width: 240px;
height: 80px;
display: block;
float: right;
}
Maybe this can solve your problem
header{
display: table;
width: 100%;
}
#header-left {
width: 160px;
height: 80px;
display: table-cell;
background: #f00;
}
#header-center {
height: 80px;
overflow: hidden;
display: table-cell;
background: #0f0;
}
#header-right {
width: 240px;
height: 80px;
display: table-cell;
background: #00f;
}
<header>
<div id="header-left">Left</div>
<div id="header-center">Center</div>
<div id="header-right">Right</div>
</header>
Suggested Answer:
<!Doctype html>
<style>
body{
margin:0;
width:100%;
}
#header-left,
#header-center,
#header-right{
float:left;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
#header-left,
#header-right{
width:10%;
background:rgb(255,0,0);
}
#header-center{
width:80%;
background:rgb(0,0,255);
}
</style>
<body>
<header>
<div id="header-left">Content</div>
<div id="header-center">Content</div>
<div id="header-right">Content</div>
</header>
</body>
</html>
I Know there are several questions about this topic, however I think they depend a bit on another CSS properties given before.
I have a nested <div id="tituloParametros>" and I need its text/contain to be centred on vertical and horizontal position.
This is my markup:
<div id="outer">
<div id="parametros">
<div id="tituloParametros">Ingresa los puntos conocidos x,f(x)</div>
</div>
<div id="resultados">
<div id="graficos">
<div id="bars"></div>
<div id="fx"></div>
<div id="pinchetabla">Tabla inútil</div>
</div>
<div id="loquerealmenteimporta"></div>
</div>
</div>
And this is the applied CSS:
#outer{
padding-left: 15px;
padding-top: 15px;
width: 1350px;
height: 640px;
}
#parametros {
float:left;
width: 20%;
height: 100%;
}
#tituloParametros {
height: 9%;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#resultados {
float:right;
width: 80%;
height: 100%;
}
#graficos {
height: 75%;
width: 100%;
}
#bars {
float: left;
height: 100%;
width: 30%;
}
#fx {
float: left;
height: 100%;
width: 30%;
}
#pinchetabla {
float: left;
height: 100%;
width: 40%;
}
#loquerealmenteimporta {
height: 25%;
width: 100%;
}
I thought that:
text-align:center;
vertical-align:middle
both will make it but it didn't. Adding display: table-cell; doesn't solve it neither, it actually crops the background to the text limits.
This is how it looks like
You're right - the table/table-cell approach doesn't work here.
As an alternative, you could resort to the absolute positioning method. An element will be vertically centered when the top value is 50% subtracted by half the element's height. In this instance, it shouldn't be a problem because the height is already set with the % unit. 100% - 50% - 9%*.5 = 45.5% If this weren't the case, you could use calc() or negative margins to subtract the px unit from the % unit. In this case, it's worth noting that the child element is absolutely positioned relative to the parent element.
Updated CSS -- UPDATED EXAMPLE HERE
#parametros {
float:left;
width: 20%;
height: 100%;
outline : 1px solid black;
position:relative;
}
#tituloParametros {
background-color: red;
width: 100%;
height: 9%;
text-align:center;
position:absolute;
top:45.5%
}
The element #tituloParametros is now centered within the parent element. If you want to center the text within it, you could wrap the text with a span element and then use the table/table-cell vertical centering approach:
UPDATED EXAMPLE HERE
#tituloParametros {
/* other styling.. */
display:table;
}
#tituloParametros > span {
display:table-cell;
vertical-align:middle;
}
Here is my fix for this!::::
HTML:
<div id="parametros">
<div id="tituloParametros"><p>Ingresa los puntos conocidos x,f(x)</p></div>
</div>
CSS:
#tituloParametros {
height: 70px;
width: 100%;
background-color: red;
text-align:center;
vertical-align:middle
}
#tituloParametros p{
line-height: 70px;
}
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Here is the demo
http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html
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 have been struggling with this for awhile now, and I can't seem to find any solution.
I have a frame, a top box, a left box and a right box and a middle box containing the last two.
I want these to be the height of the frame minus the height of the top box. This would result in the frame being filled, nothing more and nothing left.
What is wrong with my current code, and what would be a proper way to achieve this?
Here's the code:
<html>
<head>
<style type="text/css">
#frame {
width: 800px;
min-height: 500px;
border: 1px solid black;
}
#top {
width: 800px;
height: 80px;
float: left;
background-color: #666;
}
#middle {
width: 800px;
height: 100%;
float: left;
}
#left {
width: 200px;
height: 100%;
float: left;
background-color: #B3B4BD;
}
#right {
width: 600px;
height: 100%;
float: left;
background-color: #99BC99;
}
</style>
</head>
<body>
<div id="frame">
<div id="top">Top</div>
<div id="middle">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</div>
</body>
</html>
You can't specify a 100% height unless you explicitly set the parent's height. The reason is that the parent normally expands in height to fit its children, and you need to specify an exact height so that the parent knows what its height is in time for its children to need it.
That said, there are a number of ways of achieving a similar effect. For instance if one div is normally taller than the other then you can use absolute positioning to stretch the second div to the same height. Or if you're really desperate then you can use a table.
Try using proportions instead of exact pixels.
#frame {
width: 80%;
min-height: 500px;
border: 1px solid black;
margin-right:auto;
margin-left:auto;
}
#top {
width: 100%;
height: 80px;
float: left;
background-color: #666;
}
#middle {
width: 100%;
height: 100%;
float: left;
}
#left {
width: 33%;
height: 100%;
float: left;
background-color: #B3B4BD;
}
#right {
width: 66%;
height: 100%;
float: left;
background-color: #99BC99;
}
jsFiddle
Here's a screenshot of your demo with the updated CSS:
I want to align my text to the middle of my div, but I can't seem to make it work. How can I do this?
Thanks for the help!
<div style="height:40px;">Personal Information</div>
"Personal Information" should be centered between the top and bottom.
CSS:
myDiv
{
display:table-cell;
vertical-align:middle;
}
INLINE:
<div style="display:table-cell; vertical-align:middle;">Personal Information</div>
UPDATE:
This works on JSFIDDLE...
div {
display:table-cell;
width: 200px;
height: 200px;
vertical-align:middle;
background: red;
}
Making line-height the size of the element. It will, however, only work if you have only one line of text.
You can use the table-cell display style to achieve this:
CSS
display: table-cell;
vertical-align: middle;
How about this?
CSS:
#outer {
height: 400px;
overflow: hidden;
position: relative;
width: 100%;
}
#outer[id] {
display: table;
position: static;
}
#middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
} /* for explorer only */
#middle[id] {
display: table-cell;
vertical-align: middle;
position: static;
}
#inner {
position: relative;
top: -50%;
text-align: center;
} /* for explorer only */
#inner {
margin-left: auto;
margin-right: auto;
}
div.greenBorder {
border: 1px solid green;
background-color: ivory;
}
HTML
<div id="outer" class="greenBorder">
<div id="middle">
<div id="inner" class="greenBorder"> center
</div>
</div>
</div>
http://jsfiddle.net/3NjUF/4/
This is with the height of 40px:
http://jsfiddle.net/3NjUF/5/
try this(yellow is there to show that it is in the center of the div
<html>
<body>
<div style="height:40px; background-color:yellow">
<div style="position:absolute; top:50%; display:table">Personal Information</div>
</div>
</body>
</html>
You can use a neat Trick of margin:0 auto; to align the contents inside the div to center.
In this case the following code should work fine,
HTML:
<div style="height:40px;"><span>Personal Information</span></div>
CSS:
span
{
width: 50%;
margin: 20px auto;
text-align: center;
display:block
}