I'm looking for a way to devide my screen perfectly into two divs.
One small fixed sized on the left and one with dynamic width on the right.
I didn't figured out how to do this yet.
Because the width in percentage is not proportional.
For example:
http://jsfiddle.net/acmnU/2/
If you resize the result field or the overall width you see that the green
div will not resize in proportion with the screen.
If the field gets to small the green div slips under the red one.
what I need is some kind of anchor. So that the green div fill the entire screen without
getting to big.
HTML:
<body>
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS:
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
float: left;
margin-left: 10px;
background-color: green;
height: 100%;
width: 80%;
}
I hope I have interpreted your question correctly. You can try this fiddle
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
margin-left: 200px;
background-color: green;
height: 100%;
}
I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.
I advise using a layout framework to ease this type of think. Bootstrap is a good one but there are lots of others.
If you want to do it manually, you need to give the Content class a width, and use relative positioning.
Related
I want to get my footer to look like this Image. 4 columns inside a triangle shape.
However for some reason it appears that all four columns get stacked on-top of each other, which I confirmed by slight changing the top margin. When I comment out the #right_triangle, I get 4 columns, as you would expect. I believe its the border on the actual triangle that's doing it, but I cant figure out a way to do it or get around it.
Below is the code I'm using.
#right_triangle {
width: 0;
height: 0;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<div id="right_triangle">
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
</div>
Reason:
The problem as you've correctly guessed is with the #right_triangle but it is not because of border. It is because of width: 0 on this element and width: 25% on child #footer_column* elements. May be you overlooked it (or maybe you haven't understood the concept fully) but a percentage width on a child element would use the parent's set width as reference for calculation. Thus the width of all child elements are nothing but 0px. Since they are floated, the second and subsequent elements are offset from their previous sibling only by the width of the previous element(s) and they don't have any margin on the right also. So, effectively they are all placed at 0px on the left (on top of each other).
Again since they are floated they stay in same line unless their width exceeds a line's width. Here the width is also not more than a line's width (which is the parent's width). If you set even width: 1px to any of the first three elements, you'd notice that the others get pushed to the next line.
Solution:
Given how you need the screen's width to be split evenly across the 4 columns (from the image) and without changing your overall approach, you could make use of any one of the following solutions:
Give all the #footer_column* elements, a width in viewport units instead of in percentages, set display: inline-block instead of float: left and add white-space:nowrap to the parent. All these will make them get displayed on the same line without changing your markup.
#right_triangle {
width: 0;
height: 0;
white-space: nowrap;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
}
#footer_column1 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column2 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column3 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column4 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
<div id="footer">
<div id="right_triangle">
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
</div>
Make all the 4 footer column elements as children of footer element instead of #right_triangle. Since the footer is a block element, it gets 100% of the screen width by default and so it would be split evenly across the 4 children. Note that you would have to absolutely position the #right_triangle and use z-index: -1 on it for this method.
#footer {
position: relative;
}
#right_triangle {
position: absolute;
width: 0;
height: 0;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
z-index: -1;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<div id="right_triangle"></div>
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
Notes:
Using CSS transform for achieving the triangle in this question would be tough because it will require specific angle calculations for both skew and rotate (depending on which one is used) and hence not recommended.
Gradients could have been a good option for this one but unfortunately they get rough and jagged edges at very high dimensions and hence not recommended.
If you can change your overall approach, I'd recommend using SVG to create the triangle. It is not that SVG offers any great advantage for this particular shape but it is generally more useful to start learning and using SVG for shapes as it helps in creating a lot of complex ones with ease. Below is a snippet using SVG.
#footer {
position: relative;
}
#right_triangle {
position: absolute;
width: 2000px;
height: 300px;
z-index: -1;
}
#right_triangle path {
fill: green;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<svg id="right_triangle" viewBox='0 0 2000 300'>
<path d='M0,0 2000,300 0,300z' />
</svg>
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
https://jsfiddle.net/eh9h6etw/
When one of the two columns in a main wrapper is limited by a max-width, irrespective if it also has a percentage value (say 30%), upon resizing (making window larger), the second column (70%) of course does not run until the edge of the main wrapper when it's stretched out enough and second column 70% plus the fixed 150px layer are not enough to run edge to edge, how can I make it run until the end ? I want the 'blue' coloured div to run all the way to the other end without showing the yellow gap.
.main
{
float: left;
width: 100%;
background-color: yellow;
}
.rowholder
{
background-color: cyan;
float: left;
width:70%;
}
.image
{
background-color: orange;
float: left;
height: 150px;
max-width: 150px;
width: 30%;
}
.row
{
background-color: blue;
clear: both;
float: left;
width:100%;
}
<div class="main">
<div class="image"></div>
<div class="rowholder">
<div class="row">This should span until the other edge</div>
<div class="row">This should span until the other edge</div>
</div>
</div>
B
When one of the two columns in a main wrapper is limited by a
max-width, irrespective if it also has a percentage value (say 30%),
upon resizing (making window larger), the second column (70%) of
course does not run until the edge
That is because of max-width on your left column. When it reaches 150px it does not expand further, and 150px gets smaller than the 30% you specified. That will leave the difference on the right-column because that is constrained only to 70%.
To fix this, you have to specify a min-width on the second-column as well as calculate a width which is a difference of 100% minus 150px (of the left one).
Like this:
.rowholder {
...
min-width: 70%;
width: calc(100% - 150px);
}
Your fiddle: https://jsfiddle.net/abhitalks/eh9h6etw/17/
Snippet:
.main { float: left; width: 100%; background-color: yellow; }
.rowholder {
background-color: cyan; float: left;
min-width: 70%;
width: calc(100% - 150px);
}
.image {
background-color: orange; float: left; height: 150px;
max-width: 150px; width: 30%;
}
.row { background-color: blue; clear: both; float: left; width: 100%; }
<div class="main">
<div class="image"></div>
<div class="rowholder">
<div class="row">Helow this is the heading</div>
<div class="row"> this is the second row</div>
</div>
</div>
You have to remove max-width:150px; because you are setting higher value to width , than to max-width... max-width which is 150px and width:30% which is more than 150px.So your code should look like this
.rowholder
{
background-color: cyan;
float: left;
width:85%;
}
and
.image
{
background-color: orange;
float: left;
height: 150px;
width:15%;
}
After that , if you'r going to apply some image , you have to adjust your percentages in depends on the image's height and width.
I have a two-column fluid layout, with the left-hand side set to width: 40% and the right-hide side set to width: 60%. I'd like to allow users to resize their browser as large or small as they'd like, but I must have the left-hand side display a minimum width of 300px.
The following is the code I am currently using for the fluid layout, which includes the min-width specification. But, CSS is ignoring it! It allows the left-hand column to shrink below 300px.
I've also attempted to set min-width to a percentage, such as 20%, but CSS ignores this specification as well.
div#left {
background: #ccc;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 40%;
min-width:300px;
height: 100%;
}
div#right {
background: #aaa;
position: fixed;
top: 0;
width:60%;
right: 0;
bottom: 0;
}
jsFiddle Fullscreen Example: http://jsfiddle.net/umgvR/3/embedded/result/
jsFiddle Code: http://jsfiddle.net/umgvR/3/
What is causing this? How can the code be corrected?
If you're not too attached to the fixed positioning, this should do what you want.
View on JSFiddle
HTML
<div id="left">Left</div><div id="right">Right</div>
Note the lack of whitespace between the elements
CSS
html, body {
height: 100%;
}
body {
min-width: 800px;
}
div#left {
background: #ccc;
display: inline-block;
width: 40%;
min-width:300px;
height: 100%;
}
div#right {
background: #aaa;
display: inline-block;
width:60%;
height: 100%;
}
This should also work...
html
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
css
body, div {width:100%;
height:100%;
margin: 0;
}
#container {
display:block;position: fixed;
}
#left, #right {
display: inline-block;
}
div#left {
background: #ccc;
min-width: 300px;
max-width: 40%;
}
div#right {position:fixed;
background: #aaa;
width: 60%;
}
I found out that the left hand div is keeping the minimum width, but its going underneath the right div. If you bring it forward, you can see it on top of the right div. I don't think that this is ideal though.
z-index: 1;
I used z-index: 1; on the left right and z-index: 0; on the right div.
It works but I think there are better solutions out there.
I'm trying to make a 'slide-out' div that slides out when out hover over it. What I want to happen is that I want the left div to push the right div off into oblivion, but not below the div, but to the right.
Does anyone know why this happens?
Here is my script:
.container {
width: 796px;
background-color: yellow;
overflow:hidden;
}
.left {
display:none;
float: left;
width: 256px;
background: green;
}
.right {
float: right;
width: 796px;
height: 100%;
background-color: red;
}
Here is a live demo
click 'colorbox', then 'show left div'.
Thank you everyone! :))))
Assuming your .left and .right are within .container the reason one gets pushed down is because there is not enough space.
You have set a width:796px for the .container and so the children i.e. .left and .right would need to add up to 796px. At the moment they add up to 1052px and so one of them is pushed down as they cannot fit side by side.
EDIT : Using inner container method mentioned in my comments below and in #Matteo's answer you need to adjust the following css.
.inner_container{
width: 1396px; /* changed from 1052px */
}
.right {
background-color: red;
float: left; /* changed from right */
height: 100%;
width: 796px;
}
The reason it needs to be 1396px is because it needs to be large enough that when .left is expanded to 600px that .right at 769px can still fit beside it. Then changing to float:left is necessary so that there is no gap between the .left and .right and it remains visible when it is pushed sideways.
Add another div inside .container which is wide enough to hold .left and .right.
http://jsfiddle.net/DRnRQ/
CSS:
.container {
width: 796px;
height: 300px;
background-color: yellow;
overflow:hidden;
}
.left {
float: left;
width: 256px;
background: green;
}
.right {
float: right;
width: 796px;
height: 100%;
background-color: red;
}
.inner_container {
width: 1052px;
}
MARKUP:
<div class="container">
<div class="inner_container">
<div class="left">a</div>
<div class="right">b</div>
</div>
</div>
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.