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>
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 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.
I am making a web page that needs a header (on top) and a left aligned menu (below the header) and content to the right of that menu.
The problem I am facing is that I want to use (with elements and floats) rather than to create the struture of the page however, whenever I resize the browser window the content element floats down under the menu. I want the content to stick to the right of the left floating menu.
Any one got any ideas how I can fix this?
my html code has this structure:
<div id="menu">
menu #1
...
...
...
</div>
<div id="subcontent">
text or whatnot...
</div>
Css file look like this:
#menu
{
width: 200px;
float: left;
}
#subcontent
{
width: 800px;
float: left;
}
PS I have tried changing pixels to % but with no luck.
CSS
#layout {
min-width: 1001px;
}
#menu {
width: 200px;
float: left;
}
#subcontent {
width: 800px;
float: left;
}
.clear-both {
clear: both;
font: 1px/1px monospace;
display: block;
}
HTML
<div id="layout">
<div id="menu"> menu #1 ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
<div class="clear-both"></div>
</div>
Another solution:
CSS
#layout {
display: table;
width: 1000px; /* set it to 100% if #subcontent width is dynamic */
}
#menu {
width: 200px;
display: table-cell;
}
#subcontent {
width: 800px; /* you can remove the width to make it dynamic */
display: table-cell;
}
HTML
<div id="layout">
<div id="menu"> menu #1 ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
</div>
You will need an outer container.
Simply try wrapping both elements in a div of width 1000px
<div class="outer">
<div id="menu">
menu #1
</div>
<div id="subcontent">
</div>
</div>
.outer{width: 1000px;}
#menu
{
width: 200px;
float: left;
}
#subcontent
{
vertical-align: top;
width: 800px;
float: left;
}