I have a floating central DIV with 2 divs inside it. I would like to have the left side DIV set with a fixed width and the right hand div to be responsive. I just am unable to make it work.
I am looking for a better way to do achieve this result. My original code is below:
CSS
div#content {max-width: 1140px; min-width: 960px; margin:0 auto; }
div#left {width: 100px; float: left;}
div#right {background:#F63; min-width: 860px; max-width: 1040px; float:left; }
HTML
<div id="content">
<div id="left">Left Content </div>
<div id="right">Right Content </div>
</div>
Take a look at this question, it seems to address your problem: CSS side by side div with Pixel and Percent widths
They suggest to give #right a margin-left the same size as the #left div
I made a fiddle with the changes below:
div#content {width: 100%; margin:0 auto; }
div#left {width: 100px; float: left;}
div#right {background:#F63; margin-left: 100px; }
Does it look like what you were hoping for?
I assume since you want responsive you do not want the bottom scroll bar to appear.
Since you want responsive you need to do the math on the with to become a %.
I took your max-width:1140px; as a basis and made the max-width 88% (the % value of the remainder of the 1140 after the fixed 100px was removed.
This allowed for the responsiveness. For a minimum width I applied 70% just so the area did not push below the left div (due to the float:left;)
here is the working fiddle:
http://jsfiddle.net/pur4z/2/
CSS
div#content {max-width: 1140px; margin:0 auto; }
div#left {width: 100px; float: left;}
div#right {background:#F63; min-width:70%; max-width:88%; float: left;}
HTML
<div id="content">
<div id="left">Left Content </div>
<div id="right">Right Content </div>
</div>
Related
I would like to have a div ignore the margin of its parent div as in such a case:
html:
<div class="wrap">
I'm annoying!
<div class="myown"> I don't want to have that annoying guy's margin! </div>
</div>
css:
.wrap {width: 200px; margin: 0 auto;} /* Do not change */
.myown{margin: 0;}
I found this answer but it still doesn't work!
Here it is when ran: http://jsfiddle.net/KYbq3/2/
Under my circumstances I cannot change .wrap but only .myown.
If you want it to "break out" of the container, then your only option seems to be position: absolute;. The problem with it is that it takes the element out of the natural flow.
.myown{
position: absolute;
left: 0;
width: 100%;
}
Check the demo
if you know the width of the parent warp, you can calculate the diference with the viewport
then divide the diference between 2 (left and right margin)
and use the value as a negative margin-left for your own element.
and if you want to ignore the right margin, you can assign the with to 100vw.
<style>
.wrap {width: 200px; margin: 0 auto;} /* Do not change */
.myown {
margin-left: calc( (-100vw + 200px ) /2);
width: 100vw;
}
</style>
<div class="wrap">
I'm annoying!
<div class="myown"> I don't want to have that annoying guy's margin! </div>
</div>
<div id="foo">
<div class="bar">
there are very many divs like this
</div>
</div>
CSS
#foo{
margin: 10px auto;
min-height: 400px;
min-width: 800px;
}
.bar{
float: left;
text-align: left;
width: 450px;
min-height: 280px;
}
The div #foo can have a variable width from 800px to 100% of containing media and that the div .bar can have a variable height. On wide displays I want three columns of .bar divs but since they are variable height it's like they slide to the left of the div above hence those on the left have spaces above them. How do I make them float upwards. I hope I made sense.
I suggest you look at this post: Does anyone know how Pinterest.com's layout works? and possibly these jQuery plugins: http://masonry.desandro.com/ and http://www.wookmark.com/jquery-plugin.
A CSS3 solution: http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
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'm very new to XHTML and CSS and I can't get the floats to work. Somehow I keep ending up with "fondo_header" below and on the right hand side of "wrapper".
This is the HTML code:
<div id="header">
<div id="wrapper">
<div id="figure">
<img src="images/logo_2nd_225x1182_forWeb.jpg" alt="Logo" width="225" height="118">
</div>
</div>
<div id="fondo_header">
<div id="nav">
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</div>
</div>
</div>
And the CSS:
#header{
margin-top: 20px;
width: 70%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#fondo_header{
width: 74%;
float: right;
background: url(images/header.jpg);
}
#wrapper{
width: 250px;
/*float:left;*/
height:auto;
background-color:#f2dfce;
}
I need to put "wrapper" and "fondo_header" right next to each other. The width for all divs should be correct, I've also tried pixels, different widths, adding margins, padding, different floating styles and way too many things but nothing works.
I've tried IE9, Chrome and FF with the same results. Margins and paddings have been reset.
I'm pretty sure I'm overlooking something pretty obvious at this this point.
Any help much appreciated.
in case ur using floating
the floating element's width should not exceed width of container else one will go on the second line
in ur case 74% for fondo_header + 240px for wrapper is greater then width of header
u can fix that by setting width of wrapper to 26%
or setting static values for both
You have to float both #fondo_header and #wrapper to the left. And when you float elements you have to set overflow: hidden on the parent element, so it fits its content's height.
Take a look at this, it will help you understand floats better: All About Floats.
Edit: Floating #wrapper to the left and #fondo_header to the right also works.
Seems to work alright for me as long as the header is small enough to fit. Are you sure you're giving each element enough room? Using percentages for width of one element and pixels for the other are going to give you different results depending on your screen width.
#header{
margin-top: 20px;
width: 70%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#fondo_header{
width: 30%;
float: right;
background: url(images/header.jpg);
}
#wrapper{
width: 250px;
float:left;
height:auto;
background-color:#f2dfce;
}
http://jsfiddle.net/ARvw3/
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