How to create a table-like CSS layout with DIVs? - javascript

UPDATE 2
I found a tentative solution that currently works for me in Chrome on Mac OS X. You can check out my answer below for details. For those of you who are still trying to come up with CSS only solutions or JavaScript solutions, please keep going and let me know what you come up with! Please :)
UPDATE
The answer below is really close to an all CSS solution, so I'm going to try to make it work. In the meantime, I'm opening up this question to JavaScript solutions as well. How would you do it using JavaScript? All solutions are now welcome :)
Let's see if we can solve this one together!
I'm trying to set up a layout, check out the image...
I'm using the "sticky footer" technique, which works great, and I've set it up so that whenever one of the two columns gets taller, the other will also match its height, as described in this article. The problem, however, is that these two columns don't reach the footer naturally... I'm forcing the height through JavaScript.
Anyway, all the relevant code can be seen in the fiddle...
CODE
http://jsfiddle.net/UnsungHero97/XrJMa/embedded/result/
QUESTIONS
First big problem: how can I set it up so that the height of these columns reaches the footer below? I want it so that when the page loads, both pink and blue columns reach the bottom automatically.
How can I get it so that when the pink column grows beyond its current height, a local scrollbar appears, but when the blue column grows beyond its current height, the overall page scrollbar appears and the footer is pushed down?
- basically, I want the height of the pink and blue columns to ALWAYS be the same height but the height is only determined by the blue column; blue is dominant so it can expand the height of both columns; pink cannot expand the height, just be at the same height as blue
Can this functionality be achieved using only CSS?
Let me know if I need to clarify anything.

There were many issues, so I rewrote it. I have created exactly what you want. Enjoy. =)
http://jsfiddle.net/hRkx8/53/
The trick is to have your main region have a margin-bottom the same height as your footer (which you absolutely position). Thus as your blue thing gets larger, it will start pushing the bottom of the page a bit earlier than it normally would.
(edit: this version moves the footer, which is more difficult to do; however the question asked that the blue area be initialized to be as large as possible, see below for one way to do this)
Here we go! Unfortunately I have to include it inline, since jsfiddle has some severe bugs that prevent proper display. This version has the blue area start all the way at the bottom.
absolutely-positioned elements seem to have some trouble automatically scrolling as the page gets bigger, so I created a dummy #main div much like you did and had it fill the entire viewport, then inside that is both the #footer and #content (your blue and red stuff). The #footer is absolutely positioned so it takes up no space / the document doesn't care about it. As the #content expands, the #main container expands with it, dragging the footer along. The use of a margin-bottom is necessary to prevent the footer from hiding text.
The actual amount of CSS required to do this is, if you remove the demo stuff, just about 5 lines and dummy element.
<html>
<head>
<style>
body {
margin:0; padding:0;
}
* { /* just for demonstration */
box-sizing:border-box;
padding:5px;
border:1px dashed red;
-webkit-border-radius:10px; -moz-border-radius:10px;
background-color:hsla(0,50%,50%, 0.1);
}
/*important to use min-height not height*/
#main {
position:relative; width:100%; min-height:100%;
border:3px solid green;
}
#footer {
position:absolute;
left:0px; right:0px; bottom:0px; height:5em; /*can be anything*/
background-color:lightgrey;
}
#content {
position:relative;
box-sizing:border-box;
background-color:skyblue;
margin-left:auto; margin-right:auto;
padding-bottom:5em; /*must be same as #footer's height*/
margin-top:10%; /*browser bug: actually acts like 20%*/
width:50%;
min-height:80%; /*should equal 100%-marginTop*/
border:3px solid blue;
}
/* dependent elements */
#sidebar {
position:absolute;
top:0px; bottom:0px;
right:100%; width:7em;
background-color:pink;
overflow-y:scroll;
}
#topbar {
position:absolute;
bottom:100%; height:3em;
right:-10%; left:10%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
setTimeout("$('pre').animate({height:1500}, 3000)", 1000);
</script>
</head>
<body>
<div id="everything">
<div id="main">
<div id="content">
<div id="sidebar">
alpha
<br/>
beta
<br/>
gamma
<br/>
etc.
</div>
<div id="topbar">
Menu1 * Menu2 * Menu3 * ...
</div>
This is my site.
Yay.
<pre>
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
etc.
</pre>
</div>
<div id="footer">
footer
</div>
</div>
</div>
</body>
</html>

Is it just me, or is the pink elephant in the room sitting on a ...
< T A B L E >
???
Update (April 20th, 11:40AM): Here's the <table> version:
http://juliusdavies.ca/stackoverflow/pink_elephant.html
Be sure to resize your browser window a few times to see it in action.
IE8 - perfect
Chrome - perfect
Safari - no scrollbar, otherwise okay
Firefox - no scrollbar, otherwise okay

based on your most recent answer, I take it you don't need the footer to be full width (only sticky, though yours isn't) and also I presume you know that your version will only work if you know the height of the "foo - not so important content", as you need the that height to set the top co-ordinate for the sidebar .
You version falls down in that when you narrow the window content disappears off the sides.. but based on the thinking behind it - I've used your logic extended it and built in the sticky footer, top menu - everything that was in the original example link.
the footer's not full width, but you can make it look like it is by putting a background image on the html element, I have a plain dummy image in my fiddle but it's not showing up, anyway you would make an image the same height/color as the footer with the 1px border built in
this absolutely relies on you being able to fix/calculate the height of everything above the pink/blue columns
there is a lot less container divs needed for this and the content is now before the sidebar in the source
Here's the fiddle : fullsize : to edit

I see this as a design having a top a middle and a footer. The middle section contains both the pink and blue columns.
Using CSS, place a repeating image in the background of the middle-section behind both the left and right columns. This image would show the edges of both columns. Hopefully your design will accommodate this. I admit I do not know, without really digging into the code, how to make the middle expand all the way down to the bottom. I should think there are some different ways to approach this.
Use css overflow: auto; for your pink column; for the blue, set overflow: auto; on the or tag.
I hope this helps...

Related

HTML: Who takes care show/hide the scrollbar?

I read some online articles and they say that html tag represent the browser window, so html is equals to the browser window size. If the body size is greater than the html size, then the scrollbar will show up. So it is the html element that controls to display the scrollbar or not.
It's like in this picture:
You may think of it like:
html { overflow: auto; }
So if want to hide the scroll bar on purpose, I would do:
// myCSS.css
html { overflow: hidden;// override default }
If I want to scroll to a position of the body:
var position = 500;
$('html').animate({scrollTop: position}, 1000);
This sounds all promising. But I used FireBug to check the height of the html tag, they are always greater or equal than the size of body. (Assuming a default webpage with no css, and contents in body exceed window size) The html tag size is not really the size of the browser window, and it is more of the size of body element.
So where does the scrollbar really come from? How does the scrollbar really work?
I read some online articles and they say that html tag represent the
browser window, so html is equals to the browser window size. If the
body size is greater than the html size, then the scrollbar will show
up. So it is the html element that controls to display the scrollbar
or not.
That's very wrong indeed.¹
What the CSS 2.1 Spec section 9.1.1 says is
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
Yet that doesn't seem quite correct either, since a scroll is not generally provided to move the viewport over areas of the canvas that have a negative x or negative y value, even if content is painted there.
The best I can establish is that the scroll bars are made available to move the viewport over the areas of the canvas which have a rendered box for 0 or positive x and y co-ordinates.
Whatever, neither the size of the html element box, nor the body element box are special. They are just rendered boxes on the canvas, the same as other elements. Other elements may be rendered outside those boxes, because of overflow or absolute positioning and the scroll mechanism will take the full size of those elements into account.
An example and diagram may help understanding. Consider this example:
<!DOCTYPE html>
<html>
<head>
<title>Scroll limits</title>
<style>
html { padding:20px; border:1px green solid; height:80px; }
body { margin:0; border:1px black solid; height:150px; }
#div1 { position:absolute; top:-50px; height:65px; left:-50px;
width: 65px; background-color:blue; }
#div2 { position:absolute; top:200px; height:65px; left: 110%;
width: 65px; background-color:yellow; }
</style>
</head>
<body>
body
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</body>
</html>
JsFiddle
results in this:
¹ The online article probably, and the picture in the question definitely, come from http://phrogz.net/css/htmlvsbody.html. It should be noted that that article was written in 2004. In 2004, what the then draft CSS 2.1 said didn't really matter. What mattered was what IE6 did, and the article does describe what IE6 did.
This works:
html {
height:100%;
width:100%;
overflow: hidden;
}
Scrolling has to do with overflow. When the body overflows the document.documentElement (the html element) the scollbar/bars appear. While other Elements' overflow defaults to visible the html tag defaults to scroll. To answer your question, the scrollbar appears on the parent of the overflowing content, when the parent's overflow is set to scroll, in this case the html tag.

Leave space at the top of every printed page

So, I have a header that needs to appear at the top of every page when the user prints this website. I'm setting position to fixed to get it to appear at the top of every page, but the problem is that the header is now overlapping some of the content near the top. The header is a static size, so if I could just put a margin X number of pixels at the top of every page that would solve my problem, but I can't find a way to do that. Thanks.
Example code:
HTML
<header>This should be at the top of every printed page</header>
<section id="content">*Multiple pages of text*</section>
CSS
header {
position:fixed;
top:-10;
height:20px;
}
#content {
left:0px;
overflow:visible;
position:relative;
/*top:52px;*/
width:98%;
}
The "top:52px" worked to get the content to avoid the header, but it was also causing some lines of text to be cut off in the middle by a page break, which is why it's commented out.
New info:
Something interesting I discovered about the "top:52px" line: it's not actually moving the content down 52 pixels, it's somehow hiding the top 52px of content on every page. I noticed this when I set header display to none and noticed significant portions of my content still missing.
Note: I'm open to javascript or jquery solutions if one exists.
Finally figured this out:
#content {
position:relative;
display:table;
table-layout:fixed;
padding-top:20px;
padding-bottom:20px;
width: 94%;
height:auto;
}
This puts padding at the top and bottom of every page, does not cut any content off from the top or bottom, and allows #content to respect width adjustments so that content doesn't get cut off on the right side of the page.
Lots of different ways to do this, one quick way would be to just use a div tag and set the margin-top to however many pixels you want:
<div style="margin-top:20px"></div>
simply add to #content:
#content {
margin-top: 50px; // however many pixels you need
}
I think you should read about CSS #media print and #page rule margin property here.
In my case, I only added a padding-top: XXpx and that was it. The css worked fine in all pages

Different Margin-Top in all browser but IE8 / Opera

I was having this problem with margin-top in all browsers but IE/OPera, I set a div's margin-top on -800px and if I trace the div position in IE is -800px as the same is in Opera, but in FF/Chrome it adds 300px, so it says that the Div is at -1100px in the margin-top.
I've seen that the best practice is use padding instead of margins, but I'm pretty new on the whole concept. By now I can't see from where comes this 300 extra px. I actually put this div at the beginnig of my html and in the end of the html, right below of the opening body tag (As it is right now) and right at the botton just above the closing body tag, both with the same result of extra pixels.
You can see the problem here: http://www.kassandrafoto.com/ if you click on Kassandra Cruz at the main menu at the top you will see the extra margin or the 300 px gap, I want the design as in FireFox or Chrome, but in this case is weird that IE is working as I want to do it: margin-top is -800 and not -1100 (The animation is right because I play with this difference, but my problem here is ¿where those 300 px come from?.
This is the CSS of the div in question:
#kassaInfo{
width:745px;
height:671px;
color:#74CCE5;
position:absolute;
margin:0px;
z-index:1000;
left:50%;
margin-top:-800px;
background-image:url(http://www.kassandrafoto.com/images/kassaInfo.png);
background-repeat:no-repeat;
}
body{
margin:0;
width:100%;
height:100%;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
background-image:url(http://www.kassandrafoto.com/images/bg.jpg);
background-repeat:repeat-x;
overflow:hidden;
}
This is the html code, as you can see the div is the first one:
<body id='body'>
<div id="kassaInfo">
<div id="closeKassaBtn"></div>
</div><!--The rest of the Code-->
</body>
Here comes the first Js actions with it, this only centers the div base on rest the half of its witdh (This works fine) so since its 50% leftted is going to be always at the center. PS. I used Greensock TweenMax JS library but is just a tween movement of margin.
var $kassaInfo = document.getElementById('kassaInfo');
var $kassaMargin = findMargin('kassaInfo');
TweenMax.to($kassaInfo,1,{css:{alpha:0.6, marginLeft:$kassaMargin},ease:Expo.easeOut});
And here is the function for the click event:
var $kassaInfo= document.getElementById('kassaInfo');
TweenMax.to($kassaInfo,1{css{alpha:1, marginTop:220},ease:Expo.easeOut});
Well here comes the thing, as you can see the div is outside from anyone and is absolute, I don't know why the extra space in FF/Chrome.
Thanks for any help or hint that can help me out.
Greetings.
Using top instead of margin-top is the correct way, As I said I'm pretty newbie so I didn't know this little different when it comes about using position:absolute. Is like there is no margin when is absolute, just plain left, top etc.
Anyway I couldn't get right clear why the extra 300px, if someone could add some info about this it will be very appreciated.
Greetings.

My webpages div doesnt set dynamic width correctly

I have 2 toolbars, 1 of each side of the screen, and a main content area. I dont want it to have to sidescroll cause that is pathetic, so i was trying to figure out if someone could help me set it up.
My current attemp was:
$("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());
The issue is that it is too big still because of margins. Instead of me doing width, should i do outerWidth, similar to how i did window, or is there a jquery command which will do just that?
Thanks
here is a basic fiddle: it is set up differently, but the idea is there. I just am unsure as to how to do it. http://jsfiddle.net/fallenreaper/DfZx7/
Upon tinkering deeper and deeper with my fiddle, i am fairly certain i figured it out in the example i had given. derp Standby while i look and see if i can apply the same thing to my code.
The sample did not work with my code, but border was set to 2px around, for both main and attributes. Deducting 8 pixels resolves.
You don't need JavaScript to avoid scrollbars. It's a layout width two fixed-width columns and a liquid one.
Here is the "skeleton" of your layout in a responsive way:
<div id="window">
<div id="column-sx"></div>
<div id="main"></div>
<div id="column-dx"></div>
</div>​
CSS:
#window {
width:100%;
overflow:hidden;
}
#column-sx {
width:54px;
float:left;
}
#column-dx {
width: 140px;
float:right;
}
#main {
width:100%;
float:left;
margin-right:-194px; /* left + right col width */
}
#main > * {
margin-right:194px; /* left + right col width */
}
This way it will never "break" nor cause an horizontal scrollbar.
Anyway, probably you want to set a min-width for #main contents, and add another container for contents instead of targeting them with > *
Check this fiddle with your code revised
Off the top of my head, i would think outerWidth would work. If it doesnt, you can find the margin value via the .style attribute - but thats not ideal.
One thing you should be aware of is window resize if your setting your widths dynamically and you truely hate horizontal scrolling. You could put the above function also in the $().resize() function to ensure the widths are always within the window and complement this with css min-width so it doesnt go too small.

Resize div that's inside another div

I have a div that is the body of my site, inside that div I put a div on the left side (to have a vertical menu)
http://www.freeimagehosting.net/uploads/117f79fa0e.png
http://www.freeimagehosting.net/uploads/4569a5f550.jpg
My question is, how can I make the menu div follow up to the bottom of the body div so that it doesn't look like it was cut, because of the color the menu div has...I've played around with properties like position, margins, float, yet I can't seem to get it to work...
I've included two pics so that you can see the divs!
Sorry pics don't appear because i'm a new user!! i've included links though...
The first picture is the inital page, and the second is after content was added and the body div expanded to make that content fit!
Any help appreciated!
This technique has always worked for me.
See http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
The background is actually on the wrapper of the two columns though.
This is really something best approached with CSS.
Say this is your structure:
<body>
<div id="main">
<div id="leftSide"></div>
</div>
I think what you'd want to do is give the left side a height of 100% in your CSS:
#main {
height:500px; /*this can be whatever height you want for your main div*/
width:700px; /*same with this, for its width*/
background-color:#F00; /*just to show you the effect*/
}
#leftSide {
float:left; /*THIS is where the magic happens, to "pull" it to the left*/
height:100%; /*This makes sure it reaches all the way to the bottom*/
background-color:#00F; /*or any color you'd like (which is a great song btw)*/
width:200px; /*or whatever height you'd like*/
}
This all assumes of course that you don't have extra margins and padding on your divs or other elements. You also might want to consider a "CSS Reset" like this one

Categories