I have an issue (about the third time I've ran into it actually) where I have a container which holds a left and right div.
If they are of different lengths (right being longer than left or the other way around) how can I get the other one to stretch [in height] without using Javascript.
I don't want to have to result in table and I thought inherit would do it (but it just inherits auto). There doesn't seem to be an easy answer. Or should I just use tables!? Anything wrong with that?
This problem is blowing my mind for how stupidly simple it should be...
Thanks in advance!
edit: I'll give an example:
<body style="background: #000000 url(????.com);">
<div id="container" style="margin:0 auto; width:996px; height: auto; background: transparent; overflow:hidden;">
<div id="left" style="float:left; width:690px">
<div style="background-color:#FFFFFF;">Content</div>
<div style="background-color:#FFFFFF;">content</div>
</div>
<div id="right" style="float:left; width:306px">
<div style="background: transparent;">Content<br />Content<br />content<br/>Last line</div>
<div style="background-color:#FFFFFF;">Content</div>
</div>
</div>
</body>
As you would know, the left is much smaller than the right. Height:100% seems to do nothing.
Result: it's impossible without JS support. Cheers all.
If you need support for IE6 and IE7 I´m afraid you can´t do that in just css without tables or javascript.
For other browsers you can go the display: table-cell and display: table-row way.
Of course faking it using background images works if you don´t really need the columns to be equal height but just appear to be like that.
http://www.alistapart.com/articles/fauxcolumns/
For anything relatively simple faux columns will do the job, you just repeat an image vertically mimicking the simple solid bg colors of the columns. If it's anything more complex you'll need to do a combination of the sort.
See my reply here for more techniques:
2 column CSS div with stretchable height
If you just want it to appear that the columns are the same length, you can use this ugly hack:
.rightDiv, .leftDiv
{
margin-bottom: -1000px;
padding-bottom: 1000px; /*1000 + real padding*/
}
.wrapper
{
overflow: hidden;
}
Basically, it causes both columns to extend 1000px further than they should, with the unwanted bits hidden. Won't work with bottom borders though.
Obviously, this doesn't actually make them the same length.
Related
say you had this:
<div style="width: y px; display: inline-block">
<span class="one"></span>
<span class="two"></span>
</div>
Is it possible to style the two spans using css so that if span "1" has a width of x px then span 2 has a width of y - x?
Thanks!
Here is the quickest fix I can possibly give you for what you are asking.
DEMO
The demo is going to show you a few things but first I want to break down my own code as we go over it. Let's start with the HTML Code:
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
</div>
In your example, you use a span. As far as I know, span will only allow you to muck with the width of the length of the text in your span. An example of that is here, where I have set the width of the span to be 100px but it will only show the width of text within the span.
This leads me to the reasoning of a div, it is simple, and you can use it to accomplish what you are asking for. So let's break down the CSS code:
.wrapper {
width: 200px;
background:gray;
display: inline-block;
height:20px;
}
.one {
width:50px;
background:red;
height: 20px;
float:left;
}
.two {
width:-moz-calc(100% - .one);
background:black;
height:20px;
}
I apologize ahead of time for renaming your classes. Before we analyze this code, I would like to point out that I added in a height variable for each div so that I did not have to put anything in the div to check it. First thing is first, your instinct of using
display:inline-block;
is great! Next is to float or position these divs to be on the same line, in this case, you only need to float one of them to be sure they will both stay positioned on the same line. Next, I use a neat little trick, the -moz-calc, more information on this can be found on MDN's website. The gist of it is that it will take whatever the width of its parent element is and subtract the width of the class ".one" in this case, check the example below to see exactly where I am pin pointing.
.two {
width:-moz-calc(100% - .one);
background:black;
height:20px;
}
Now, if you go through and play with my DEMO, you will quickly notice that if you alter the width of the red div, it will change the width of the black div, further accomplishing what you need :) If this is not what you want, comment below and we can figure something out :)
I encourage you to play around with my JsFiddle to get the exact feel for what the divs do and what the calculator does as well. Also, for future reference, this site has always been helpful for me!
display:table/table-cell; seems to be appropriate to me.
<div style="width:200px; display: table">
<span class="a1" style="display: table-cell;border:solid;width:1px;">a</span>
<span class="a2" style="display: table-cell;border:solid;">b</span>
</div>
*Using numbers as first caracter to name class or id's is not a good idea. use W3C validator to find out *
Display will make your box react as a <table> and first <span> will shrink on its content will the other one will use all space left.
My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!
A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)
Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.
This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers
OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/
Im still having a bit trouble understanding my divs. Im trying to make a website that changes its sizes according to browser/screen size.
Ive gotten this far:
my html:
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
my css:
#wrapper{width: 60%;}
#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left; width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}
Now my divs are exactly the right size, the problem is that the conect is always at the bottom of the div but i need it to be like a normal div so i can do anything i want with it.
Whats the easiest way to use it like a normal div?
Thank you for any help! :)
Edit:
Here is what it looks like: http://jsfiddle.net/rswML/
... and as i said the problem is that the text is always at the bottom of the div. I understand its because of padding-top but i need it to keep the hight ratio to width andd still use the div normally.
What you are trying here is a responsive design concept. I advice you to try out bootstrap framework for this. Rather than doing everything by your own, you can get everything done by simply adding a class to your divs.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices
I think the issue may be with your padding values. Perhaps adjusting them will allow you to have the control you want or maybe a margin-top would be better. Also, not sure if you were hoping to line up the tops of the elements #left and #right but those padding settings may render at different values. The padding-top property with a percentage references the containing block's width. Hope that helps. Cheers.
The solution was that i had to make header divs position: relative and then make another div inside of it that was position: absolute and width/height: 100%.
I'm having a very hard time trying to come up with html/css for a layout to suite the following:
Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.
I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?
There's several ways to go about this. Here's one not particularly fancy but straight-up way to go about it:
<body>
<div id="menu">MENU</div>
<div id="content"> content <br /> content <br /> content </div>
</body>
CSS:
div { border: 2px solid black; } /* demo purposes */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 154px; /* menu width + (2 x menu.border-width) */
}
See this jsfiddle for a working sample.
This solution has the added benefit that your content region will take up exactly 100% of the remaining width of its parent:
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
CSS:
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }
Excellent tutorial on fluid layouts: http://www.alistapart.com/articles/holygrail
Works in IE7 and newer, Safari/Chrome/Opera/Firefox...
The best way to do this is by using the already considered safe to use box-sizing property.
Take a look at the tinkerbin -> http://tinkerbin.com/AcJjYk0r
It works as you want it to. Fixed width for the menu, percentage based width for the content area.
Then...
...if you want the background-colors to expand to the highest of the heights between the two boxes (remember, one times the menu can be higher than the content box, and vice-versa), then the only way to go about it (no javascript) is to use a background image and place it below the two boxes. With css3 gradients (safe to use too) it's pretty easy. Take a look:
http://tinkerbin.com/3ETH28Oq
I have a very simple nested <div> layout:
<div id="main">
<div id="options">
option 1 |
option 2
</div>
</div>
I applied a very simple CSS :
#main{
height:50px;
background-color: #cc00ff
}
/*here is the thing confused me*/
#options{
margin-left:auto;
width: 8em;
}
You can run it on jsfiddle here. Everything works fine. But there is one little thing confused me: which is, why the CSS code :
#options{
margin-left:auto;
width: 8em;
}
makes the options <div> to be located to the right side of the main <div> ? Anyone can explain to me the reason?
The reason is because you have set an auto margin on one side, which means it will just fill the space given it. I suppose this is the same sort of result as applying a float of right, but without any impact on document flow. It basically works out the automatic margin by removing the width left after the width of the contained elements.
If you wanted it centered you'd need to add an auto margin to both, with fills both sides of the parent with the width left over equally.
Why are you put the margin-left:auto; in the option DIV. The option div is gone to the right because of the margin-left. It is already left aligned. If you want the option div in the center, just need to put the margin:0 auto;
Thanks,
Arun Krishnan