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>
Related
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
I am trying to use CSS to get a DIV to fill the remaining page width, after a fixed-width div on the left (and below a fixed-height header)
The CSS I have is:
body{margin:0;padding:0}
#header{height: 100px; background:#ccccff;}
#left {position:absolute; left:0; top:100px; width:200px; background:#ccffcc;}
#main {position:relative; left:200px; background:#ffcccc;}
The HTML is:
<div id="header">Header stuff here</div>
<div id="left">Left stuff here</div>
<div id="main">Main stuff here</div>
(head and doctype omitted here for brevity)
When it is rendered, the main div is still full page width, meaning the right-hand edge is 200px off the right edge of the browser. How can I get the main div to fill the remaining width?
(eventually I will want to put other divs inside main, and make their widths expressed in % relative to the main div)
Is this even possible?
Don't use position. Use Floats. Float the "left" div left, set its width. Give the "main" div a left-margin of the width of the left div, and set the width to auto.
#left { float: left; width: 200px;}
#main {margin-left: 201px; width: auto;}
Example here: http://jsfiddle.net/GhtHp/1/
Instead of using positioning which is considered evil, just use floats.
#left {float:left; width:200px; background:#ccffcc;}
#main {margin-left:200px; background:#ffcccc;}
DEMO
Does this accomplish what you're looking for?
HTML -
<div id="header">Header stuff here</div>
<div id="left">Left stuff here</div>
<div id="main">Main stuff here</div>
CSS -
div {
border: 1px solid black;
}
#left {
float: left;
}
Jsfiddle - http://jsfiddle.net/xzWK5/
Yes, it's easily possible with CSS calc. Unfortunately CSS calc is only supported in Chrome so far.
Here's a better way:
HTML:
<div id="header"></div>
<div id="left"></div>
<div id="main"></div>
CSS:
#header{height: 100px; width: 100%; background:#ccccff}
#main{position: absolute; left: 200px; right: 0; background:#ffcccc}
#left{width: 200px; left: 0}
Having #main exactly 200px from the left and 0px from the right gives you the full width minus #left
So yet another question about vertically aligning an image within a div, but I think mine is different than the others I've found on here. I can't seem to find a solution that works for my situation.
I have a DIV that is 100% width (to it's container, which is floating left and has a set pixel width) and has a set pixel height. I have an image inside that I am positioning absolute to get it to the background of content within the DIV. The image is fluid with a width of 100%.
All works well, but I want to get the image to vertically align to the middle of the container and height is unknown.
Here is some sample code that shows what I'm trying to do:
<div class="container">
<div class="image-wrapper">
<img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"
width="100%" />
</div>
<p>Some text</p>
</div>
And some sample CSS:
.container {
width:100%;
margin-top:10px;
height:100px;
overflow:hidden;
}
.image-wrapper {
position: relative;
}
.image-wrapper > img {
position: absolute;
z-index: -1;
}
p {
text-align: center;
padding-top: 10px;
color:#fff;
font-weight: bold;
}
But the flower should show up with it's center visible within the container div.
Any thoughts? I'm trying to avoid any Javascript sizing (the outer container, not shown in this sample, is already being sized). I'm not opposed to more DIVs, tables.. whatever you got!
A jsFiddle to demo this:
http://jsfiddle.net/JonMcL/sNz9h/
Why not go for the background-image property? That allows vertical centering...
http://jsfiddle.net/urrWS/
Assuming you want to only scale the image down and not stretch it beyond its native resolution this should do the trick. A little bit of jQuery is involved but it's minimal. Essentially, this adjusts the top-margin of the IMG on the window.resize event.
HTML
<div id="container">
<img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>
CSS
#container {
margin: auto;
width: 80%;
height: 300px;
border: 1px solid gray;
}
#image {
display: block;
width: 100%;
max-width: 480px;
margin: auto;
}
jQuery
function adjustImage() {
$("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}
$(window).load(function() {
adjustImage();
$(window).resize(function() {
adjustImage();
});
});
If I get what you need I would suggest setting the background image via css, then you can set the position correctly etc.
.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;
}
http://jsfiddle.net/sNz9h/6/
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;
}
I have a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.
I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.
How should I fix this?
It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top
Another option (or as well as) is to set the line-height to the desired height rather than the height.
If you have no luck with these, I suggest you put your html and css up on jsfiddle.
Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.
CSS Code
#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}
HTML Code
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner" style=" margin:0;"></div>
</div>
Here's a working solution. http://jsfiddle.net/j3zjg/
<style>
#container{
width:500px;
height:300px;
border:1px solid red;
}
#container div{
width:30%;
float:left;
height:40px;
background:red;
margin-right:5px;
}
</style>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>