I have two divs, say : #left and #right JSFiddle
<div id='container'>
<div id='left'>
</div>
<div id='right'>
</div>
</div>
I want #right div to be always 200px whatever the screen size be.
I want #left div to automatically fit the screen of left area.
#container,#left,#right{
margin: 0;padding:0;
}
#container{font-size : 0}
#left{
display : inline-block;
width : auto;
background : #00bbbb;
font-size: 19px
}
#right{
display : inline-block;
width : 200px !important;
background: #eee;
font-size: 19px
}
I did in jQuery by :
var _width = $('#container').width();
var _custom = _width - 200;
$("#left").css('width',_custom);
But, I want to know if this is possible pure CSS because of performance issues (I have a lot) and I have to modify them at every time window resizes. In short, they are not cool in this scenario.
Any ideas?
Note: This is not a progress bar and the Right one is static, not left!!!
You can achieve this with just CSS. Set a height for each div.
.left{
float:left;
background: #efefef;
width: 200px;
height: 100px;
}
.right{
overflow:hidden;
background-color:#000;
height: 100px;
}
UPDATE
To achieve what you are asking and having one right div of 200px fixed and the left to fill the rest, you can invert the order of the html elements and then float right the div #right which is first in the html order.
<div class="right"></div>
<div class="left"></div>
.left{
background: #efefef;
height:50px;
}
.right{
overflow:hidden;
background-color:#000;
height:50px;
float:right;
width:200px;
}
JSFIDDLE - what you need: http://jsfiddle.net/a_incarnati/8pk4K/2040/
Use:
#right {
float:right;
width:200px;
}
#left {
margin-right:240px;
}
Float & margins
Related
I have layout comprising of a 100% width header, 2 column content divs (30-70% width) and a 70% width footer (visible only in the bottom of right div).
My HTML mark up is like:
<section id="mySection" >
<header id="headerTop">
</header>
<div id="wrapperLeft">
</div>
<div id="wrapperRight">
</div>
<footer id="footerRight">
</footer>
</section>
My CSS is
#mySection
{
margin:0 auto;
padding:0;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
#headerTop
{
position:absolute;
top:0;
left:0;
height:40px;
width:100%;
overflow:hidden;
}
#wrapperLeft
{
position:absolute;
top:40px;
left:0;
width:30%;
bottom:0;
overflow:auto;
}
#wrapperRight
{
position:absolute;
top:40px;
left:30%;
width:70%
bottom:30px;
overflow:auto;
}
#footerRight
{
position:absolute;
left:30%;
bottom:0;
width:70%;
overflow:hidden;
}
I would like to know if I can design this better such that if i hide the left or right div, the other div is displayed at 100%. I think i can change the CSS dynamically via javascript and adjust the left and width values for the other div, but it is getting messy and would like to avoid it if possible.
Ideally would love to call show or hide on the div and the other div automatically adjusts itself to 100% width.
I have no control over the height of the content in either div and would want the browser to display scrollbar when the content height exceeds the window.
Thanks in advance for your help.
I would add a wrapper to the divs so you can float then instead of positioning then absolutely. This way you can make at least one div 100% wide. For instance the right div. If you want both divs to be dynamic in size you will have to use jquery. For instance adding classes if you want to keep the jquery to a minimal.
example HTML:
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
example CSS :
#main{
position:relative;
overflo:hidden // This will make the container grow with the children
width:960px;
}
#left{
width:200px;
float:left;
height:100%;
}
#right{
float:left;
width:100%;
height:100%;
}
Example of CSS with additional classto toggle divs
#main.only-left #left{
width:100%;
}
#main.only-left #right{display:none;}
I think I know what you're talking about. I've created a little example here. Basically set 30% on the sidecolumn, and display: block; on the main column. Click on the body anywhere to toggle the side column to show how the main column adapts... is this going in the right direction?
Codepen sketch
HTML
<div class='wrapper'>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<article>Main article</article>
</section>
<footer>Footer</footer>
</div>
CSS
body {
margin: 0;
padding: 0;
}
section {
overflow: hidden;
position: relative;
}
header {
background: crimson;
height: 100px;
width: 100%;
}
aside {
background: #efefef;
float: left;
height: 300px;
width: 30%;
}
aside.hide { display: none; } /** For demo purposes **/
article {
background: #ccc;
display: block;
height: 300px;
}
footer {
background: crimson;
float: right;
height: 100px;
width: 70%;
}
jQuery (just for hideToggle example)
$('html').on('click', function(){
$('aside').toggleClass('hide');
});
UPDATE: Here's an example with a little assitance from jQuery for class toggling. Could probably be generalized more... http://codepen.io/kunalbhat/pen/kuAcg
This question already has answers here:
Setting width/height as percentage minus pixels
(11 answers)
Closed 9 years ago.
I have a parent div and 2 divs inside it. First child div is 50px wide and 100% height. Second child div is 100% height and I it to take rest of the width ( 100% - 50px ) how do I do that?
Here is the fiddle that I've created: http://jsfiddle.net/muGty/
Basically I want blue div (right ) to occupy rest of the grey container completely.
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
Do you mean like this?
<div id="left">
</div>
<div id="right">
</div>
CSS
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
margin-left: 200px;
background: #0f0;
height: 100%;
}
Update:
You can also use calc() property in CSS3, which will ease up this process like
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
float: left;
background: #0f0;
height: 100%;
width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}
Demo 2
Just change your right div to this:
.right{
float:left;
height:50px;
width: calc(100% - 50px);
background-color: blue;
display:inline-block;
}
You could add a 50px margin to right and float it.
What about editing your right class to make it look like this :
.right{
float:left;
height:50px;
width: 100%;
margin-right:-50px;
background-color: blue;
display:inline-block;
}
You could also work with an absolute position for the right side column. Consider this example:
.parent{
width:100%;
height:50px;
background:#888;
position:relative
}
.left{
float:left;
height:100%;
width:50px;
background:green
}
.right{
background:red;
position:absolute;
bottom:0;
left:50px;
right:0;
top:0
}
Also see this Fiddle. Note that you would need to set position: relative on the parent container for this to fly.
I think this is a classic one. I found a lot of similar questions but no answer.
I want to vertical center any image of any not-known height into a div with overflow:hidden
This is what I have right now:
.outer {
padding-top:49px;
height:49px;
width:280px;
overflow:hidden;
background-color:yellow;
}
.outer .inner {
float:left;
position:relative;
display:block;
background-color:blue;
}
.outer .inner img {
position:relative;
top:-50%;
width:280px;
height:auto;
border:0px;
display:block;
}
So the .inner is pushed to the center of the .outer by padding-top, so I get a "window" of 2 x 49px = 98px height. Then the img I thought would be pushed out 50% from the .inner height but for some reason i get a different number…
Does anybody know what I am doing wrong?
Thank you in advance!
I faced a similar situation and solved it with a different approach.
For that I used the image as a background image of a div.
Code sample
<head>
<style>
div.imgbox1{
width: 160px;
height: 110px;
overflow: hidden;
background-position: 50% 50%; /* for vertical and horizontal center alignment*/
}
</style>
</head>
<body>
<div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
</div>
</body>
If using img tag isn't a must you can try this
First things first... An explanation of why you are getting the result you are getting. This is quite simple. Setting position: relative; (or absolute for that matter), and then setting top: 50%; aligns the very top of your image to 50%. If you make the height of your image 1px, you can see that the 1px is centered. Unfortunately there is no way with CSS to tell it to align to the center of the image rather than the top edge.
Now... A possible solution...
Assuming that nothing else is going inside this .inner div, have you considered allowing the image to determine the inner div's height via a margin?
Take for example this JSFiddle.
You can "center" the image inside the .inner div, by setting margin left and right to auto, and margin top and bottom to some px value... In my example 60px.
If you want to obtain a total div height of 600px, and your image is always 400px tall, then a margin top and bottom of 100px makes a total height of 600px. (400+100+100=600).
HTML:
<div class="outer">
<div class="inner">
<img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
</div>
</div>
CSS:
.outer {
height:520px;
width:520px;
overflow:hidden;
background-color:yellow;
border: 2px solid purple;
}
.outer .inner {
width: 340px;
display:block;
background-color:blue;
border: 1px solid red;
padding: 10px;
margin: 0 auto;
}
.outer .inner img {
width:280px;
height:auto;
margin: 60px auto;
border:0px;
display:block;
border: 1px solid orange;
}
A second possible solution...
Assuming that the <img> tag does not HAVE to remain an <img> tag, then a very simple way to do this is to move the image itself to CSS, as a background-image.
See this JSFiddle for a demonstration of this solution.
HTML:
<div class="inner">
</div>
CSS:
.inner {
width: 540px;
height: 340px;
display:block;
background-color:blue;
border: 1px solid red;
margin: 0 auto;
background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}
I need help in centering one DIV withing a DIV.
I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.
Within headerContainer, I want 3 more DIVs:
A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).
I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.
Thanks for any help.
CSS:
.leftDiv{
float: left;
width: 400px;
}
.rightDiv{
float: right;
width: 200px;
}
.centerDiv{
width: 100px;
margin: 0 auto;
}
HTML:
<div>
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
DEMO:
Code: http://jsfiddle.net/Xxwrm/6/
Fullscreen: http://jsfiddle.net/Xxwrm/6/show
This works.
.headerContainer{
width:auto !important;
}
.leftDiv{
float:left;
width:400px;
}
.rightDiv{
float:right;
width:200px;
}
.centerDiv{
display:inline;
width:100px;
margin-left:auto;
margin-right:auto;
}
.
<div class="headerContainer">
<div class="leftDiv"></div>
<div class="centerDiv"></div>
<div class="rightDiv"></div>
</div>
What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.
For example in this case you'd have one # 400px, another # 100px, another # 200px and another one, hidden, # 200px.
Regards,
Richard
<div class="headerContainer">
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
This HTML with this CSS will work. I colored the DIV's to make it obvious.
.headerContainer{
width:auto;
}
.leftDiv{
float:left;
width:400px;
background:pink;
}
.centerDiv{
width:100px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
background:cyan;
}
.rightDiv{
float:right;
width:200px;
background:lightgray;
}
However, if the screen is not 700px wide, you will get some wrapping.
Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/
You can use a modern solution due the flex concept of css3.
.parent {
display: flex;
height: 300px;
/* Or whatever */
background-color: green;
}
.child {
width: 100px;
/* Or whatever */
height: 100px;
/* Or whatever */
margin: auto;
/* Magic! */
background-color: yellow;
}
<div class="parent">
<div class="child ">Div1</div>
</div>
I have 3 divs, all contained within a parent They are in parent-div.
Here's my HTML:
<div id="header">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
And my CSS:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
float: left;
width: ???;
background-image: ...;
}
#right
{
float: left;
width: 280px;
background-image: ...;
}
I want the #left and #right divs to have static sizes and non-repeating backgrounds. However, the #middle div should resize depending on the page size. How can I write my CSS so that the #middle div changes its with dynamically, apart from the width of the other two divs?
I think:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
margin-left: 334px;
margin-right: 280px;
background-image: ...;
}
#right
{
float: right;
width: 280px;
background-image: ...;
}
and then you will need to change the order of the DIVs slightly:
<div id="header">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
But middle should resize due to window/page size!
Unfortunately, there is no way to express the calculation you want (width: 100%-614px) in CSS. So you have to let the width default to ‘auto’, which means ‘100% minus any margins, paddings and border’, and then use margins or padding on the middle element of the same size as the left and right elements.
Mark B suggests one approach to this using floats; you can also do it by relative-positioning the parent and absolutely positioning the left and right child elements, which has the advantage of not requiring a re-ordering of the elements.
You should be further able to absolute-position the middle element by its left and right properties as suggested by John, but this ‘edge-positioning’ technique doesn't work in IE6, so instead the middle element has to have margins in the same was as the float example.
If you are just trying to put a border image on the left and right of your element you can do that more easily using nested background images:
<div id="header"><div class="left"><div class="right">
content...
</div></div></div>
<style type="text/css">
#header { background: url(/img/header-background.gif); }
#header .left { background: url(/img/header-left.gif) top left repeat-y; }
#header .right { background: url(/img/header-right.gif) top right repeat-y; }
#header .right { padding: 0 280px 0 334px; }
</style>
something like this seems to work
#left
{
position:absolute;
top:0;
left:0;
width: 334px;
border:solid 1px red;
}
#middle
{
position:absolute;
top:0;
left:339px;
right:285px;
border:solid 1px green;
}
#right
{
position:absolute;
top:0;
right:0;
width: 280px;
border:solid 1px blue;
}
also, if you made the parent div have position:relative; these three divs would be positioned absolutely within that parent.