I am trying to display two divs next to each other. The first one is 200x200 pixels and the second is 10 pixels to the right of to the first one. It's 200 pixels high, and its width must fill the right of the page to the right.
I have this so far:
<html>
<head>
<style>
div.div1 {
border: 1px solid red;
color: red;
width: 200px;
height: 200px;
float: left;
}
div.div2 {
border: 1px solid black;
width: 100%;
height: 200px;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">Test123</div>
</body>
</html>
This works for the first two requirements, but when I set width: 100% then it goes below. If I set it to a number in pixels it seems to work though, but won't adjust as I change the size of the window. How can I fix this so the second element extends all the way to right?
You can use flex on the parent, and set .div2 { flex-grow: 1; } to have it consume all of the available space left over from .div1
body {
display: flex;
}
.div1 {
width: 200px;
height: 200px;
color: red;
border: 1px solid red;
}
.div2 {
border: 1px solid black;
margin-left: 10px;
flex-grow: 1;
}
<div class="div1">div1</div>
<div class="div2">div2</div>
you can use calc:
.div2 {
width: calc(100% - 214px);
}
that is 100% minus 200 px, 10px margin, 4px border (2x left and right borders)
Try this:
<html>
<head>
<style>
#div1 {
float:left;
width:200px;
border:1px solid red;
min-height:200px;
}
#div2 {
margin-left: 210px;
border:1px solid green;
min-height:200px;
}
</style>
</head>
<body>
<div id="div1"> </div>
<div id="div2"> </div>
</body>
</html>
Tip 1: Use percentage in both divs to add a total of 100%.
Tip 2: Use the max-width property, so that the second div can extend to no longer then a certain point.
Tip 3: Use the developer tools (inspect), select the second div and increase the pixels width until it reaches the total width of the page.
Related
If I float:left a bunch of divs that are the same dimensions, it seems to work well, for example:
divs properly floating
However, if one of the divs is taller than the others, only the first div will float left of it and the rest are all pushed to the right. I can reproduce this by increasing the height of divtwo in the example:
div.divone{
width:100px;
height:100px;
background-color: red;
border-style: solid;
border-color: blue;
float: left;
}
div.divtwo{
width:100px;
height:250px;
background-color: green;
border-style: solid;
border-color: blue;
float: left;
}
<div class="divone">abc</div>
<div class="divtwo">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>
An image of the two examples side by side with an arrow pointing to where I'm expecting the divs to go
What should I do to get those small divs to properly fit in the empty space to the left of the tall div?
Sounds like you are looking for masonary type layouts. Here's a good blog post.
https://medium.com/#_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.64f1qm9a
Taken from my answer here.
div {
width: 100px;
height: 100px;
break-inside: avoid-column;
}
#red {
background-color: red;
}
#green {
height: 250px;
background-color: green;
}
#blue {
background-color: blue;
}
#yellow {
background-color: yellow;
}
#orange {
background-color: orange;
}
body {
width: 300px;
columns: 3;
}
<body>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="orange"></div>
</body>
You can use CSS columns to achieve this effect quite easily.
I'm trying to build a CSS page layout based on this old frameset:
<frameset cols="30%,70%">
<frame>left</frame>
<frameset rows="80%,20%">
<frame>top</frame>
<frame>bottom</frame>
</frameset>
</frameset>
What was easy 15 years ago seems to get a bit more complicated nowadays. I wrote the following HTML:
<div id="container">
<div id="left">left</div>
<div id="right">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</div>
Together with this CSS:
#container {
border: 1px solid black;
height: 300px;
}
#left {
border: 1px solid red;
float: left;
width: 30%;
height: 100%;
overflow-y: scroll;
}
#right {
border: 1px solid blue;
margin-left: 30%;
height: 100%;
}
#top {
border: 1px solid red;
height: 80%;
overflow-y: scroll;
}
#bottom {
border: 1px solid red;
height: 20%;
}
I put a demo here.
What I want to achieve and failed so far is the following: Height of #bottom shall be a certain pixel height, not percents. When I do this, I mess up with #top. I tried to use absolute positions to stick #bottom at the bottom but then I don't know how to let #top use the rest of the height.
Any ideas would be appreciated. Thank you.
I think this (fiddle) what you are looking for.
#top {
border: 1px solid red;
height: 80%;
overflow-y: scroll;
}
#bottom {
bottom:0;
border: 1px solid red;
height: 20%;
}
The divs will look like they don't precisely fit but it's only because of the borders. If you want the borders then you can use the css box-sizing property and set it to border-box. See this page for reference. Basically it makes the size of an element include the border which it doesn't by default.
How do I implement this layout (which is build using a table) with DIVs?
Basically I want to have two divs on the same line: Div1 and Div2. Div1 should be aligned to the left, Div2 – to the right. Div2 has also minimal width being set. When the width is not enough for both of them then Div1 one must wrap its content giving space to Div2. Whatever I have tried the Div2 always was moved under the Div1 before the content of Div1 was wrapped.
So I came up with solution made with a table. How to build same layout using DIVs?
Solution with a table:
<!DOCTYPE html>
<html>
<head>
<style>
#table {
width: 100%;
word-wrap: break-word;
}
#div1 {
border: 1px solid red;
}
#div2 {
width: 30%;
min-width: 250px;
text-align: right;
border: 1px solid green;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td id="div1">This text should wrap when window is made smaller.
<td id="div2">This takes 30% but not less than 250px;
</table>
</body>
</html>
HTML:
<div id="wrapper">
<div id="left"></div>
</div id="right"></div>
</div>
CSS:
#wrapper {
width: 100%;
float: left;
}
#left {
border: 1px solid red;
float: left;
}
#right {
width: 30%;
min-width: 250px;
text-align: right;
border: 1px solid green;
float: left;
}
Didn't test it, but it shall work.
Regards.
Is this something you were looking for? http://jsfiddle.net/fFkNW/3/
I changed the markup to use divs and updated the CSS to use floats
If you make the window smaller, you can see the red box start to wrap around the green box.
HTML
<div id="div2">This takes 30% but not less than 250px.</div>
<div id="div1">This text should wrap when window is made smaller.</div>
CSS
#div1 {
border: 1px solid red;
}
#div2 {
width: 30%;
min-width: 250px;
float: right;
border: 1px solid green;
}
Try taking a look at CSS box-flex.
One of the most high fidelity ways to do this would be to simply use divs displayed as a table:
#table {
width: 100%;
word-wrap: break-word;
display: table;
}
#table > div {
display: table-row;
}
#div1, #div2 {
display: table-cell;
}
You can see here that it looks exactly the same.
How come when I float #main div to the right, the right border doesn't line up with the right border of the header div?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
#header {
width: 960px;
height: 70px;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#leftcol {
width: 250px;
height: 500px;
border: 1px solid black;
float: left;
margin-right: 20px;
}
#main {
width: 686px;
height: 500px;
border: 1px solid black;
float:right;
}
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="leftcol">
</div>
<div id="main">
</div>
</div><!--end wrapper-->
</body>
</html>
As #alfonso pointed out, borders are increasing the actual size of your divs.
It's good practice to use box-sizing: border-box on all the elements with borders, so that the borders go inside. Alignment becomes MUCH easier.
You forgot to consider the border width of the header.
In total, your header's width is 960px + 2px from the border = 962px, while the main content plus the sidebar have a width of 960px.
If you set the header's width to 958px, both divs align.
Here's a reference to the CSS box model to help you do the math: CSS box model
<style type=text/css">
#container {
height:30px;
width:100%;
}
.left.button {
float:left;
width:60px;
}
.right.button {
float:right;
width:60px;
}
.middle.indicators {
height:30px;
}
.middle div{
display: inline-block;
margin: 10px 2px;
}
.circle {
background: rgb(102,102,102);
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
}
</style>
I have 3 divs in a container. I want to push the left button div left and the right button div right and have the middle indicators div in the center. The issue is the middle div needs to be dynamic width since the number of circle divs inside changes dynamically based on other variables. There could be 3 circles or 5 or 10. I need the middle div to stay centered and also be able to expand based on the number of circle divs inside.
<div id="container">
<div class="left button"></div>
<div class="middle indicators">
<div class="circle></div>
<div class="circle></div>
<div class="circle></div>
</div>
<div class="right button"></div>
</div>
I would change the CSS a little to get things like this jsFiddle example (div borders added to make visualizing them easier). By giving the middle indicators div a left and right margin slightly larger than the width of the left and right button divs, you allow it to float up between the two and take up as much space as possible.
CSS:
div {
border: 1px solid #999;
}
#container {
height: 30px;
width: 100%;
}
.left.button {
float: left;
width: 60px;
}
.right.button {
float: right;
width: 60px;
}
.middle.indicators {
height: 30px;
text-align:center;
}
.middle {
margin: 0 70px;
}
.circle {
background: #666;
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
display: inline-block;
}