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>
Related
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>
I would like to set the 2-columns divs with the same height than container (without using px of course)
HTML
<body>
<div id="container">
<div id="hdr-lay">
Header
</div>
<div id="left-column">
Grid Layout left
</div>
<div id="right-column">
Grid Layout right
</div>
</div>
</body>
CSS
#hdr-lay {
_background-color: red;
}
#container {
background-color: gray;
height:100%;
width:100%;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
}
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
}
http://jsfiddle.net/g3gxv4j2/
Perhaps it would be easier to do itwith no ?
I would like to set the 2-columns divs with the same height than
container
Since your container have height:100%, I assume you want the same for your child div's
Give 100% height to your html and body
html,body{
height:100%
}
You've set height:100% for your container. This will only extend its height to 100% of its content(which themselves are not getting 100% height). Let your left and right columns inherit height from their parent container.
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
height:inherit;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
height:inherit;
}
Here's the fiddle
Cheers!
This might be better :
#container {
display:flex;
flex-direction:row;
}
#left-column {
width: 30%;
background-color: blue;
}
#right-column {
background-color: red;
width: 70 %;
}
An example of my code can be found on JSFiddle http://jsfiddle.net/WdZgV/
CSS
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.header_div {
display: inline-block;
width: 100%;
text-align: center;
}
.header {
display: inline-block;
height: 100px;
width: 100%;
max-width: 1000px;
background: #ddd;
}
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float: left;
width: 800px;
height: 100px;
background: #999;
}
</style>
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
What i want is that when you resize the window width to less than 1000px the .menu div resize to the size of the parent div.
So as an example:
If you have your window width as 900px, the .logo div has 200px and the .menu div has 700px.
Is there anyway i can do this with CSS, or i need to use Javascript?
Yes — remove the float, don't specify width, and set overflow to hidden. Example here; .menu becomes:
.menu {
height: 100px;
background: #999;
overflow: hidden;
}
#Andoni Roy Use this
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float:right;
overflow:hidden;
height: 100px;
background: #999;
}
You may not want to play with floating properties but specifying the parent width and display to table.
Like in the following example: http://jsfiddle.net/A8zLY/745/
You would end up having something like:
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
CSS
.header_div {
width: 1280px;
}
.header {
display: table;
}
.logo {
display: table-cell;
width: 280px;
}
.menu {
display: table-cell;
width: 1000px;
}
You could specify width in percentages.
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 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;
}