I would like to position a div next to a div with contents of width: 100%. So the markup is:
<div id="left_sidebar" style="float: left; height: 100%; width: 150px;"></div>
<div id="outer_wrapper" style="position: relative; float: left;"></div>
pretty much everything in #outer_wrapper has a width of 100%. Unfortunatly it does not work.
I made a FIDDLE
How about :
#left {
width: 150px;
height: 1000px;
background-color: green;
float: left;
}
#right {
width: 100%;
height: 1000px;
background-color: red;
float: left;
}
<div id="right">
content here
<div id="left"></div>
more content here
</div>
SECOND OPTION :
remove the width and the float property of the .right div and give it 150px left margin :
#left {
width: 150px;
height: 1000px;
background-color: green;
float: left;
}
#right {
height: 1000px;
background-color: red;
margin-left:150px;
}
<div id="left"></div>
<div id="right"></div>
http://jsfiddle.net/hasecbinusr/cm9qxbt8/2/
$(document).ready( function() {
var rightWidth = $(window).width - $('#left').width();
$('#right').width(rightWidth);
});
How about this?
<div style="padding-left:150px; position:relative;width:100%;">
<div id="outer_wrapper" style="position: relative; width:100%">this is 100%</div>
<div id="left_sidebar" style="position:absolute;left:0px;top:0px;width:150px;">this is 150 pixels wide</div>
</div>
The idea is to have the outer-most div a left padding of 150px so that the first child div will be rendered 150px away from the border. Then add another div that will become the left container by using an absolute position and force it to be rendered as if it is the first.
Related
I am building a web page which has 3 DIV inside the main content left,right,right2.Here is a rough design:
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="right2"></div>
</div>
And here is the CSS for it:
#content {
height:auto;
overflow:auto;
}
#left {
float: left;
min-height:700px;
width: 70px;
background-color:#6495ed;
overflow:hidden;
}
#right {
float: right;
min-height:700px;
width: 70px;
background-color:#6495ed;
overflow:auto
}
#right2 {
float: right;
min-height:700px;
width: 450px;
background-color:#FFFFF0;
overflow:auto;
}
The issue is the 3 div's left,right and right2 do not fit according to the content size.Like if the main context increases,they stick to 700px height.If I give height:auto then the DIV aren't visible.
I have attached two images to help understand better:
So basically I want to make the size dynamic of the left and right DIV's too,but cannot find a way to do it.Thank you for any responses
Try to use
display:table-cell;
height:auto;
Nowadays I see this problem often
JS Fiddle
Please user below div structure and its css.
<div id="content" style="float: left; height: 700px; width: 100%;">
<div class="content_blk">first block content</div>
<div class="content_blk">second block content</div>
<div class="content_blk">third block content</div>
</div>
css
#content{
float: left;
height: 700px;
width: 100%;
}
.content_blk {
float: left;
height: 500px;
width: 100%;
}
This is sort of hard to explain so I made a fiddle:
https://jsfiddle.net/8wujkpqb/
I have a right floating div with a max-width set. I need the div inside of that to take up 100% of the max-width so the content can be left-aligned to the content in the div below.
<div class="container">
<div class="mainleft">
<div class="outer-red">
<div class="first">
I need this<br/> pushed to the left<br/> to align with the<br/> lower text but still<br/> be in a "max-width"<br/> container floating right.
</div>
<div class="clear"></div>
</div>
<div class="outer-gray">
<div class="second">
this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width
</div>
<div class="clear"></div>
</div>
</div>
<div class="mainright">
<div class="right-content">
content
</div>
</div>
<div class="clear"></div>
CSS
.container {
width: 100%;
}
.mainleft {
width: 50%;
float: left;
}
.mainright {
width: 50%;
float: left;
}
.outer-red {
width:100%;
background: red;
padding: 40px;
box-sizing:border-box;
}
.outer-gray {
width:100%;
background: gray;
padding: 40px;
box-sizing:border-box;
}
.first {
float: right;
max-width:250px;
clear:both;
}
.second {
float: right;
max-width:250px;
}
.right-content {
width:100%;
background: blue;
padding: 40px;
box-sizing:border-box;
}
.clear {
clear: both;
}
https://jsfiddle.net/8wujkpqb/
Any help is greatly appreciated!
Just add another div into your "first" container that possesses the max-width and let the parent be the size that is necessary to align the inner container left. Like so
.first {
float: right;
max-width: 100%;
clear:both;
width: 200px
}
.inner {
max-width: 200px
}
https://jsfiddle.net/8wujkpqb/1/
Hello I have two boxes inside one container. Now the boxes are in the same ratio to each other:
<div class="container" width>
<div style="width=80%">box 1
<div>
<div style="width=20%">Box 2
</div>
</div>
</div>
</div>
What I want to do now is give Box 2 the constant width of 200px. But Box 2 should always fill exactly the rest of the container.
I hope you understand what I mean.
Is this possible?
Here a basic two colums code :
<style>
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: #CCF;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}
</style>
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Do you mean like minimum width ? you can do it like that :
#box2 {
width: 20%;
min-width: 200px;
}
I want to place divs next to each other. I dont't know number of divs, since this is dynamically created and changed. I would like to have one parent div which will have scrollbar in case there are many child divs (and their width is greater than parent).
Here's the jsFiddle example. So, basically I would like to have all this three columns, next to each other and with scrollbar on the bottom of parent div.
HTML:
<div class="content">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
CSS:
content {
width: 100px;
background- color: #355E95;
overflow: visible;
}
.column {
width: 50px;
display: inline-block;
}
Add white-space:nowrap to your parent div.
FIDDLE
You would need to use a content div for the scroll and then a wrapper for the columns, adjusting the width of the wrapper to fit all 3 of your columns (150px in your example).
The column structure is made by floating div's left, but it will float to the width of your parent container, in this case your parent container is only 100px so we need to add a wrapper for them to fit inside.
If you also want a vertical scroll you will need to set a height to your container.
Jsfiddle: http://jsfiddle.net/tYnH3/
css:
.content {
width: 100px;
background-color: #355E95;
overflow: auto;
}
.content-wrapper {
width: 150px;
}
.column {
width: 50px;
float: left;
}
html:
<div class="content">
<div class="content-wrapper">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/bdssw/
use float:left;
.column {
width: 50px;
display: inline-block;
float:left;
}
Try the following JS fiddle
http://jsfiddle.net/jT6SW/1/
#wrapper
{
float: left;
height: 150px;
width: 250px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}
use width:auto;
.content {
width: auto;
background-color: #355E95;
overflow:scrolling;
position:fixed;
}
.column {
width: 50px;
float:left;
}
http://jsfiddle.net/XqSJG/6/
I need left div as menu and right as content.
I'm trying to adopt the accepted answer from this post:
CSS: how to get two floating divs inside another div
#container {width:900px;}
#left {
width: 150px;
float: left;
}
#right {
width: 500px;
margin-left: 170px;
}
.clearBoth{clear:both;}
HTML
<div id="container">
<div id="left">leftMenu</div>
<div id="right">rightContent</div>
<div class="clearBoth"></div>
</div>
left and #right should be top aligned but #right is bellow #left.
Have you tried giving the right div a float too?
#right {
width: 500px;
margin-left: 170px;
float: left;
}
a jsfiddle to show you it works :)
http://jsfiddle.net/LtUzc/
Try this one
#container {width:900px;}
#left {
width: 500px;
float: left;
}
#right {
width: 500px;
float: left;
}
.clearBoth{clear:both;}
<div id="container">
<div id="left">leftMenu</div>
<div class="clearBoth"></div>
<div id="right">rightContent</div>
</div>