I have simething like this:
<div class="container">
<div class="left">
(an image)
</div>
<div class="right">
(some divs and other text)
</div>
</div>
and I want toalign the 2 divs side by side
.container {
width: 100%;
}
.left, .right {
float: left;
width: 50%;
}
What do I need to do, because this doesn't work
No have problem with your code... Divs are aligned side by side...
.container {
width: 100%;
}
.left,
.right {
float: left;
width: 50%;
border: 1px solid red;
box-sizing: border-box;
}
<div class="container">
<div class="left">
(an image)
</div>
<div class="right">
(some divs and other text)
</div>
</div>
If you want to do full-height divs with half screen spreading. this will work.
.Left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
background-color:black;
}
.Right {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
background-color:blue;
}
Here's an working Example.
maybe you have given padding, margin, border to child div
it should work
try this
decrease some width of child div
50% to 49% like this or
.container {
width: 100%;
margin:0;
padding:0;
border:0;
}
.left, .right {
float: left;
width: 50%;
margin:0;
padding:0;
border:0;
}
Related
I'm trying to create a layout for a page like this with a full height left close bar. I keep running into the left close bar either pushing everything down or is limited to only the top left corner:
I think you want something like that.
body {margin:0;}
.side {
position: fixed;
background: blue;
top: 0;
left: 0;
bottom: 0;
width: 100px;
}
.content {
padding-left: 100px;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
.top {
height: 100px;
width: 100%;
background: orange;
float: left;
}
.left, .right {
width: 50%;
height: 200px;
float: left;
}
.left {
background: green;
}
.right {
background: magenta;
}
<div class="side"></div>
<div class="content">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>
If you want to make the sidebar full height you can use
.sidebar{
height:100vh;
}
and then you can give position:fixed;
Is there a way I can set the right hand panel to be say 200px and for the left panel to take up the rest of the space?
At the moment the right panel appears under the left panel.
Also, if I change the parent width, the left and right panels should appear within the parent and be sized accordingly.
#left {
background-color: #ff0000;
}
#right {
float: right;
width: 180px;
margin-left: 190px;
background-color: #00FF00;
}
<div>
<div id="left">left</div>
<div id="right">right</div>
</div>
You can use flexbox:
#container {
display: flex; /* establish flex container */
}
#left {
flex: 1; /* consume all available space */
background-color: #ff0000;
}
#right {
flex: 0 0 180px; /* don't grow, don't shrink, fixed at 180px width */
background-color: #00FF00;
}
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
jsFiddle
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.
Is there a way I can set the right hand panel to be say 200px and for the left panel to take up the rest of the space?
Yes.
There's a variety of ways you can implement it. I have listed four options below. The first three will require the use of width: calc(100% - 200px) for the left panel. The last option using flexbox does not require it.
Using position: absolute:
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
#left {
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
width: calc(100% - 200px);
}
#right {
width: 200px;
background-color: #00FF00;
position: absolute;
top: 0;
left: 0;
margin-left: calc(100% - 200px);
}
<div class='container'>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Using display: inline-block:
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
#left {
background-color: #ff0000;
display: inline-block;
width: calc(100% - 200px);
}
#right {
width: 200px;
background-color: #00FF00;
display: inline-block;
}
<div class='container'>
<div id="left">
left
</div><!--
--><div id="right">
right
</div>
</div>
Using float:
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
#left {
background-color: #ff0000;
float: left;
width: calc(100% - 200px);
}
#right {
width: 200px;
background-color: #00FF00;
float: right;
}
<div class='container'>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Using display: flex:
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
display: flex;
}
#left {
background-color: #ff0000;
flex-grow: 1;
}
#right {
width: 200px;
background-color: #00FF00;
}
<div class='container'>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Swap DIVs around to change processing order:
<div>
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
<style>
#left {
background-color:#ff0000;
}
#right {
float: right;
width:180px;
margin-left: 190px;
background-color:#00FF00;
}
/style>
That kind of layouts can be easily addressed by using Flexbox, other option is to use calc, which browser support isn't too wide, but could help... you'll need to add:
#left {float: left; width: calc(100% - 200px);}
That's assuming your other element will be 200px per your question (but not your code), please remove the margin-left from the element #right to make this work.
Hope this helps.
If you want to check browser support for calc, take a look to http://caniuse.com/#search=calc
Both divs are inside another div :
#container {
width: 100%;
}
#container > .first {
display:inline-block;
float:left;
width:100px;
}
#container > .second {
display:inline-block;
float:right;
margin: 0 auto;
width:100px;
}
<div id='container'>
<div class='first'>Left</div>
<div class='second'>Right</div>
</div>
The second div is aligned right not center though. How do I get it centered without using tranforms? I also need it so it is in one line, no stacking.
Unfortunately there is no simple method using floats, inline-block or even flexbox which will center the 'middle' div whilst it has a sibling that takes up flow space inside the parent.
In the snippet below the red line is the center point. As you can see the left div is taking up some space and so the middle div is not centered.
Sidenote: You can't use float and display:inline block at the same time. They are mutually exclusive.
#container {
text-align: center;
position: relative;
}
#container:after {
content: '';
position: absolute;
left: 50%;
height: 200%;
width: 1px;
background: #f00;
}
#container > .first {
float: left;
width: 100px;
background: #bada55;
}
#container > .second {
display: inline-block;
width: 100px;
background: #c0feee;
}
<div id='container'>
<div class='first'>Left</div>
<div class='second'>Center</div>
</div>
Solution:
You would have to remove one of the elements from the document flow using position:absolute and then position that element accordingly.
#container {
text-align: center;
position: relative;
}
#container:after {
content: '';
position: absolute;
left: 50%;
height: 200%;
width: 1px;
background: #f00;
}
#container > .first {
position: absolute;
top: 0;
left: 0;
width: 100px;
background: #bada55;
}
#container > .second {
display: inline-block;
width: 100px;
background: #c0feee;
}
<div id='container'>
<div class='first'>Left</div>
<div class='second'>Center</div>
</div>
<div style="width:100%;">
<div style="display:inline-block;float:left;width:100px;">Div 1</div>
<div style="display:block;width: 100px;margin: 0 auto;">
Div 2
</div>
</div>
So I'm working on some html/css stuff
I can't seem to get these two floating div's and the footer to be correctly sized inside the parent div.
the content div is positioned absolutely to get header and footer to show respectively.
HTML:
<div id="Content">
<div id="Header">header</div>
<div id="Container">
<div id="leftTable">
<div>left content</div>
</div>
<div id="rightTable">
<div>right content</div>
</div>
</div>
<div id="Footer">
<div>footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#Content {
padding: 0 15px;
height: 100%;
background-color: honeydew;
position: relative;
height: 100%;
}
#Header {
height: 60px;
background-color: aliceblue;
}
#Footer {
position: absolute;
bottom: 0;
background-color: purple;
height: 70px;
}
#Container {
background-color: green;
position: absolute;
top: 60px;
bottom: 70px;
margin-right: 15px;
}
#Container:after {
clear:both;
}
#leftTable {
float: left;
width: 50%;
height: 100%;
background-color: grey;
}
#rightTable {
float: left;
width: 50%;
background-color: blue;
}
http://jsfiddle.net/4CabB/12/
I was hoping to no position the Container div or footer div on the left and right sides and just have it take up the remaining space.
I'm a bit unclear as to what needs to be achieved, but perhaps this solves your issue: JSFiddle.
Essentially, I just needed to add
width: 100%;
to your container to allow its children to take up the space. Parent containers, when absolutely positioned, must have their widths specified.
Let me preface this by saying I feel like a moron. I have a fairly simple scenario that I can't figure out.
This is a sample of what my code looks like:
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="line"></div>
</div>
</div>
Let's say #container-wrapper is a fixed width such as 960px. #container has its width set to 100%. I don't know the width of .left because the text inside is dynamic. It's floated left. .line has a background image that is essentially a line which will repeat to fill the width of the div. I want to float it next to .left so it looks something like this:
This is LEFT ---------------------------------------------------------
If I set the width of .line to 100% it will trying to fill the entire container width so the question is how do I get it to fluidly adjust to the space that is left over from .left.
Hope I'm being clear.
Thanks,
Howie
Here's a sample of the real code I'm using. .line is really .inside-separator.
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="inside-separator"><span class="inside-separator-left"> </span><span class="inside-separator-right"> </span></div>
</div>
</div>
.inside-separator
{
background: transparent url('../images/inside_separator.png') no-repeat center center;
margin: 0;
padding: 0;
height: 7px;
width: something?;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('../images/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
I'm not sure this is possible using floats. But if you're ok using display:table instead of floating .left then it's easier.
div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }
<div class="left"><div class="line">11111111111111111</div> This is LEFT</div>
Put the .line inside the .left and float .line right
http://jsfiddle.net/Hk7GR/1/
Thanks for all of your help. The display:table did the trick. Here's a sample http://jsfiddle.net/idpexec/QKSzC/
<div class="container-wrapper">
<div class="container">
<div class="left">This is LEFT</div>
<div class="inside-separator-wrapper">
<div class="inside-separator">
<span class="inside-separator-left"> </span>
<span class="inside-separator-right"> </span>
</div>
</div>
</div>
</div>
<style>
.container-wrapper
{
width: 500px;
height: 60px;
border: 1px solid green;
margin-bottom: 50px;
}
.container
{
display:table;
width:100%;
}
.left,
.inside-separator-wrapper
{
display:table-cell;
}
.left
{
border: 1px solid red;
white-space: nowrap;
padding: 0 15px;
}
.inside-separator-wrapper
{
width: 100%;
position: relative;
}
.inside-separator
{
background: transparent url('http://test.2wsx.ws/inside_separator.png') no-repeat center center;
height: 7px;
position: relative;
top: 0px;
left: 0px;
padding: 0;
width: 100%;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('http://test.2wsx.ws/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
<style>