I have this HTML and css, I need to make them float next to each other and the right div should auto resized when the left div's with changes and the height of all should open fully on screen, how can I do that please help:
CSS:
.ne-divadmincontent
{
top: 15px;
width: 100%;
height:100%;
}
.ne-leftcontent
{
float:left;
}
.ne-rightcontent
{
float:left;
border-left:dotted 1px #CCC;
}
HTML:
<div class="divadmincontent">
<div class="ne-leftcontent">
l-content
</div>
<div class="ne-rightcontent">
r-content
</div>
</div>
If you don't specify the width of your two inner div tags (ne-leftcontent, ne-rightcontent) they will automatically receive the width of their parent div (divadmincontent)
Therefore a solution for your problem would be to assign some value to your inner div tags
.ne-leftcontent{
width:40% // 560px
float:left;
}
.ne-rightcontent{
width:60% // 400px
float:left;
}
Related
I want to keep three div in one row of different width one in left one in center and one in right.
Left div is of 160px
Center Div is of 640px
Right Div is of 160px
All i want is when they open in wide screen All will look separate on in left one in center one in right.
And When User Re-size Browser window or open in smaller resolution they come near to each other and do not collapse(means they acquire atleast 960px = 160 + 640 + 160)
As Far I done this with the help of StackOverflow & Google :
Html :
<div id="main">
<div id="leftDiv">left</div>
<div id="centerDiv">center</div>
<div id="rightDiv">right</div>
</div>
CSS:
#main {
overflow:hidden;
}
#main div {
width:33%;
float:left;
}
#leftDiv
{
width:160px;
}
}
#centerDiv {
text-align:center;
width:640px;
}
#rightDiv {
text-align:right;
width:160px;
}
If you can help me please provide me solution.
Thanks In Advance
Well, by using this approach you have to reorder the elements as:
<div id="main">
<div id="leftDiv">left</div>
<div id="rightDiv">right</div>
<div id="centerDiv">center</div>
</div>
You could keep the centerDiv element at the center of the layout by using auto value for the left/right margin.
Also you could set a minimum width to the container element (#main) in order to prevent collapsing the layout.
#main {
min-width: 960px; /* minimum width: 160px + 640px + 160px */
}
#leftDiv { float: left; width:160px; }
#rightDiv { float: right; width:160px; }
#centerDiv {
width:640px;
margin: 0 auto;
}
WORKING DEMO
For these i would suggest using twitter bootstrap, you just need to do this:
css:
#main {
min-width:960px;
}
/* these are optional, but you do want your columns to scale unless you have a max width */
#leftDiv, #rightDiv {
width: 160px;
}
#centerDiv {
width: 640px;
}
html:
<div id='main' class='row'>
<div class='col-md-2' id='leftDiv'></div>
<div class='col-md-8' id='centerDiv'></div>
<div class='col-md-2' id='rightDiv'></div>
</div>
The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.
<div style="position:absolute; top:0; width:100%; height:40px"></div>
<div class="howto"></div>
<div style="position:absolute; bottom:0; width:100%; height:40px"></div>
So we don't know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.
For what you wish to accomplish, this is one possible solution:
#tinkerbin: http://tinkerbin.com/QsaCPgR6
HTML:
<div class="container">
<div class="header"></div>
<div class="howto">
Has height set to auto. You may change that if you want to.
</div>
<div class="footer"></div>
</div>
CSS:
.container {
position: relative;
padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}
.header,
.footer {
position: absolute;
height: 40px;
width: 100%;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.howto {
height: /*specifiy one if you wish to*/;
}
As far as I know there isn't a pure CSS way to do what you're trying to do without JS.
See this previous post on SA:
Make a div fill the height of the remaining screen space
I have two divs in my page: leftpart and rightpart which has the following css:
.leftpart{
width:280px;
background:#0054a6;
color:#fff;
padding-top:40px;
height:100%;
min-height:637px;
box-shadow:3px 3px 10px #bebebe;
position:relative;
}
.rightpart{
width:75%;
padding-left:10px;
}
I want this sidebar(leftpart) till the end of my page(till the bottom). I've set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
If you want to try this in CSS you could try the negative margins trick.
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
SIDEBAR
</div>
<div class="col2">
CONTENT
</div>
</div>
I need the content div to 'fill' the remainder of the screen left over after the header. I would would like to keep the wrapper padding & margin. Using absolute position doesn't work as the content div stops being visually nested in the wrapper. (The header div can be a fixed height if absolutely necessary, however I would prefer it to be dynamic.) Many thanks.
* {
margin:0px;
padding:0px;
}
html,
body {
height: 100%;
}
#wrapper {
background-color:#eee;
margin:20px; padding:20px;
border: solid 1px #333;
}
#header {
}
#content {
background-color:red;
}
.
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
Fiddle here:
http://jsfiddle.net/jHLhK/
Specify width and height set to 100% to your content div.
#content {
background-color:red;
width:100%;
height:100%;
}
The 100% means it will be as much as it has space available from surrounding elements.
Or you may only want height or only width to be 100% depending on your requirement.
This is probably a very dummy question, don't throw your shoes at me :)
Consider having HTML like this:
<div class="container">
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
I want 'header' and 'footer' to be anchored to the parent's top and bottom respectively, and 'body' to grow easily to fit all available space.
What would the CSS look like to achieve this?
EDIT: Maybe I'm saying this wrong (i'm not exactly a web developer :) ), but what I need is to have some part of a div always attached to its bottom. So when div grows this part (which might have a fixed size) would go lower with the div's lower end. But all this doesn't mean attaching a div to the bottom of browser's window.
If I understand your question correctly, you require some really basic css.
body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }
Your div's are not floated, so will stack on top of each other like pancakes.
If you want the footer to be "sticky", see here for a solution...
http://ryanfait.com/sticky-footer/
Here you go:
Example page - footer sticks to bottom
this will have the content right
between the footer and the header.
no overlapping.
HTML
<header>HEADER</header>
<article>
<p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>
CSS
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{
content:'';
display:block;
height:100px; // compensate Footer's height
}
header{ height:50px; }
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; // height of your Footer (unfortunately it must be defined)
}
Try this: Set position: relative on the parent div. Set position: absolute on the inner div(s) and set both the top and the bottom properties; don't set height. The inner div(s) should stretch vertically with the parent, as required. (Doesn't work in IE6 and below unfortunately).