Background:
I'm trying to visualize the structure for my future pages and containers in the full screen.
Current JSFiddle:
Available here.
<div class="top">top</div>
<div class="middleleft">left</div>
<div class="center">center</div>
<div class="middleright">right</div>
<div class="bottom">bottom</div>
.top
{
background-color: yellow;
height: 20%;
}
.middleleft
{
float: left;
background-color: blue;
width: 20%;
}
.center
{
float: left;
background-color: white;
width: 60%;
margin: auto;
height: 60%;
}
.middleright
{
float:left;
background-color: red;
width: 20%;
}
.bottom
{
height: 20%;
background-color: green;
}
Problem:
For some reason, even with height defined on the CSS, it does not fill the entire screen to the bottom, linking only enough background color height and width until the text ends.
Need:
What code change is needed to fill the screen to the dimensions it has (like the 60% width on the center div), without having to write characters to the bottom to fill out the div on the screen?
Code type restrictions:
I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.
Many Thanks
JSFIDDLE CODE
I added this:
html, body {height:100%;}
Then I set your center div to height 100% (and made it pink so it can be seen more easily).
EDIT: I left your side divs alone as I'm not sure what you want to do with those, but I hope this helps.
Wrap the top/center/bottom content into one class allowing the left/right divs to merely sit outside of the wrapper.
This can be achieved, but I think you need to ask yourself why you want to do this. Today, with mobile there is no standard screen size, so a full screen for one screen is not going to be a full screen for another.
Instead, why not try adding some real content to your proposed structure and see how it stacks up then?
Or, if it's purely for mockup purposes, then maybe use some graphics software where it's much easier and quicker to move things around.
Related
Option 1
Below is a general layout of a site im trying to construct. The green regions are the sites header and footer. The blue region is flash content who’s height changes depending on what is displayed. The red region are two spacers im trying to construct that bound the flash content and their sizes change according to the width of the browser however the width of the flash content stays static.
Where im getting hung up is how do i create these spaces in css. I assume that i would use CSS to solve this problem correctly.
For example, in the CSS file i need to set the background color and height as they as always going to be static, only the width changes.
#left spacer {
background-color: #881E42;
height: 46px;
float: left;
}
#right spacer {
background-color: #881E42;
height: 46px;
float: right;
}
How can i set the width of right and left spacer to (Browser width - Flash Content width)/2
Where the width of the flash content is static at 920px.
I'm not sure how to govern the width of the spacers.
Somehow the width of the spacers needs to be set to a size of (Browser width - flash content width)/2
In this example the static width of the flash content is 920px and the browser width is variable. so say the browser width is 1920px than the size of each spacer would be 500px per container. I would also set the minimum width of each spacer to 20px so they show up if the browser width is below a certain threshold.
Opetion 2
The other idea that i had was to create 1 container which housed the flashcontent
<div id="container">
*Flash content scipt goes here
</div>
I dont know how to do this or even if its possible, but it would work
#Container{
psudo code
Color 1: #881E24
Color 1 height: 25px
Color 1 width: 100%
background-color: #FFFFFF;
height: auto;
width: 100%;
text-align: center;
}
Here is a working JSFIDDLE
Updated code.
Example of code,
<div id="header">
</div>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div class="clear"></div>
<div id="footer">
</div>
CSS
#header {
width: 100%;
height: 50px;
background-color: green;
}
.clear {clear: both;}
#one {
width: calc((100% - 250px)/2);
height: 10px;
background-color: red;
float: left;
}
#two {
width: 33%;
height: 970px;
background-color: blue;
float: left;
}
#three {
width: calc((100% - 250px)/2);
height: 10px;
background-color: red;
float: left;
}
#footer {
width: 100%;
height: 50px;
background-color: green;
}
One way to do this would be make the three DIVs float:left and size them as you want, then between the end of the content you'd use a clear and end with the floating area.
If you do it that way, you'll have:
left_spacer | flash_content | right_spacer
The spacers are really only needed if you want to put content in them (otherwise you could use only margins to put #flash_content wherever you want, and not need to make anything float).
To size your DIVs, you would have to size left_spacer and flash_content with a certain amount of pixels or percentage, and right spacer should fill the rest of the space.
You might want to put the three divs in a container if you're using fixed width, too.
edit: actually, I think you won't need to make the last of the three divs (right_spacer) float:left, since it is the last one on the row.
They say, that a single picture can explain more than a tousand words, so here's my "more": http://www.imagebanana.com/view/hcqsz5fs/cols.png
My goal is to have the columns as shown on the image, with them together having 100% body width.
And my fiddle is here: http://jsfiddle.net/c2JH3/ (note that this is just a mockup of my current work).
How can I achieve this?
A Quick Note
In your comments, you are saying that you can't use a background image because the height is variable.
The way to fix this is using multiple images, and tell them to repeat or not to repeat on different parts of the page. But I'll go over this after I answer your question directly.
Short Answer
To get 100% body width, you'll want to use percentages (%) on for your width rules. Like this:
#left {
width: 60%;
}
#right {
width: 40%;
}
Fixing Some Problems
One problem you are bound to encounter when you have content that passes the bottom of the screen. In this case, you need to tell the divs to stay side by side.
This should do the trick:
#left {
position: absolute;
top: 0;
left: 0;
width: 60%;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 40%;
}
Back to the Note
Believe me, you don't want to be using percentages on your widths. It makes sizing and scaling extremely hard to design nicely, and changes that you try to make in the future probably won't work without a complete redesign of your css.
Like I was saying before, you want to use multiple images. You'll have background image on the body tag that - going by the design you provided - has the gray-to-orange fade in it. The css would look like this:
body {
background-image: url('path/to/header.jpg') no-repeat;
}
You would then have a wrapper div like the one you already have, that holds the content and such. Inside the wrapper you have:
A header (the logo and navbar), which would have no background (so you can see the body background).
A featured section which holds that really big image in the middle. You can use negative margins to get it centered.
A subnav section for those images in the middle. This would have it's own background image that has a matching part of the background of the body so that it appears to flow in as the image does.
A content section that holds all of the content of the page. This would have an image repeating vertically to look continuous.
#content {
background-image: url('path/to/slice.jpg') repeat-y;
}
A subfooter section that has the curved part of the page (that gray-to-orange curve at the bottom).
And finally a footer section that has all the stuff on the very bottom.
You can use the same structure on the inner pages, you would just use different images and spacing to change the look of the page.
To Sum Up
You will never, ever need to have a 100% width for your wrapping div. (I say this to generalize, there are certain styles that use this, but they aren't the same kind of design).
What you should always try to do first is create images for the body, header, content, and footer sections that create the look you want.
Then have your wrap be a set width in pixels that will stay in the center of the page, while the margins increase and reveal more of the background image.
Have fun and good luck with your design!
I don't know how to use fiddle. But this worked out fine for me.
I just used the background colors and borders to properly show the differences
<!doctype html>
<html>
<head>
<title>xxx</title>
<style>
body{
margin: 0;
}
#wrap {
width: 100%;
}
#left {
width: 600px;
float: right;
border: 1px solid #000000;
}
#right {
width: 350px;
border: 1px solid #000000;
}
#container_left {
width: 55%;
float: left;
background: red;
}
#container_right {
width: 45%;
float: right;
background: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container_left">
<div id="left">
<p>Content</p>
</div>
</div>
<div id="container_right">
<aside id="right">
<p>Sidebar</p>
</aside>
</div>
</div>
</body>
Cheers!
Thank you all for your answers and ideas. They were helpful and I did learn something new (my biggest 'thank you' goes to #Jon for a really great, great post). But, since I can't solve this neither with percents nor backgrounds (since my design is a little more complicated that the one provided), I made my way with jQuery. To sum up, here's my mockup fiddle.
Note: sometimes you'll need to change left 125 to 126, just to make sure both ends meet.
Edit 2: It seems clear that no one seems to be able to understand what I'm asking, so I'll try to illustrate it;
The area in the center has the id #navigation. This has the following CSS properties,
width: 960px;
margin: auto;
background: #e4bd04;
The reason it has a width of 960px, is because I would like the links in my navigational bar to remain within a 960px limit. I'd also like them centered, so I apply margin: auto. However, this means that my background only flows for 960px. I'd like the background to flow for the entire window width (100% of page), so that users with larger screens don't end a huge chunk of white space at the top.
In order to prevent this, I nest #navigation into another id, #navouter, to which I apply width: 100%; and background: #e4bd04;, so that the background now appears to extend for the entire width of the window.
Is there any way to do this without using two elements as I've done?
I've undestood, you don't want to have 2 div to center another div with fixed width, isn't it ?
I don't think that you'll love it, but this is a solution :
.nav {
width:960px;
position:absolute;
left:50%;
margin-left:-480px; // width / 2
}
<body>
<div class="nav">Test content</div>
</body>
Result for 300px div : http://jsfiddle.net/7GTCc/1/
Or another, really ugly (lol) :
.nav {width:960px;}
<center>
<div class="nav">Test content</div>
</center>
Edit regarding your illustration
"Is there any way to do this without using two elements as I've done?"
No :-)
But if you only want the background to be 100%, don't specify a background (color or url) to your #navigation.
Last try to answer, test this :
#navigation {
min-width:960px;
text-align:center;
}
Demo here : http://jsfiddle.net/7GTCc/3/
you could use min-width property , dont know what exactly you are looking for
<div style="min-width:960px; width:100%"></div?
Yes, this is easy to do without additional markup. Use the ::before pseudo-element for the expanding part of the navigation.
Demo: http://jsfiddle.net/ThinkingStiff/eAf7w/
HTML:
<div id="nav">navigation</div>
CSS:
#nav {
background: #6D7B8D;
height: 40px;
margin: 0 auto;
width: 400px;
}
#nav::before {
background-color: lightblue;
content: '\00a0';
display: block;
height: 40px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
I have spent hours looking for a solution and cannot find anything on this particular issue, so please forgive me if it has been answered.
I have a standard CSS page with a masthead, a navigation row, a left column for links, a right column for contents and a footer.
I have set everything to the center of the page at 1024px wide.
What I just cannot achieve is to have the 2 columns stay at the same height when one has longer content than the other.
Let me explain this - both columns have a 1px border that I would like to extend all the way down to the footer. The right column has much longer content so it reaches the footer very quickly but the left column doesn't so the border stops, where the links finish.
To fix this problem I have set the heights to 100% in the html, body, container and the two columns as follows:
html {
height: 100%;
}
body {
height: 100%;
}
#masthead {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#top_nav {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#container {
width: 1024px;
height:100%;
margin-left:auto; margin-right:auto;
}
#left_col {
width: 198px;
float: Left;
height: 100%;
border: 1px solid #FF0000;
}
#page_content {
margin-left: 200px;
width: 824px;
height: 100%;
border: 1px solid #000000;
}
#footer {
bottom: 0px;
clear: both;
width: 1024px;
height: 50px;
margin-left:auto; margin-right:auto;
border: 1px solid #000060;
}
This works BUT now the content of the right column (which is much longer) goes way past the footer? and no matter what I try I cannot fix this without affecting the left column's border i.e. I can use min-height: 100%; which fixes the overflow and footer problem, BUT this has the side effect of capping the border on the left column back to the Navigation link's height i.e. so the border no longer flows to the bottom of the left column and down to the footer (grrrhhh!)
Here is a link to the page itself which you can copy and paste into DW or EW etc. to see what's going on:
http://www.iifuture.org/downloads/testzzz.html
If anyone knows how to fix this paradox I'd love to know about it!
Thanks
Shaun
Actually scratch that : remove the height:100% on the container, left col and page content. That's it.
Edit(revised answer after discussions)
This article helps.
style="background: blue url(someimage.png) repeat-y left;"
Add the above style to container. This is a hack, the DIV doesn't grow but the background image covers it up to get the layout you want!
Please refer this question and answer selected to learn more.
Original answer
Please take a look at overflow property. I was able to get your example page working with the below style added to page_content DIV.
position:absolute;overflow:auto;
With this code the scrollbars appear if the content exceed the height set. If you do not want to get the scrollbars and are okay with not showing the data beyond the DIV height, just use hidden instead of auto. Likewise, to display the scrollbars at all times, you may use scroll.
The last option visible will make it *(mis)*behave the way it is behaving right now i.e. letting the data grow beyond the DIV height. Notice that the DIV is not growing, only the content is.
I've looked around and haven't found QUITE what I'm looking for yet, so hopefully this question hasn't already been answered somewhere else!
Anyways, the layout in question can be found HERE. What I am trying to achieve is a fixed width left column, and fluid width content area. For the most part, it works just fine. However, when content expands beyond the browser window's height or width, the sections don't seem to expand like I would want. Notice how to grey bar at the top doesn't reach the right of the page content, and the height of the left column doesn't reach the bottom of the page content either.
Am I right in thinking this stems from the fact that setting something to 100% height or 100% width via CSS is static? i.e. Whatever the height/width of the browser window was when the CSS was called is saved and that's that?
If that's the case, maybe I need to look into some other methods of setting the height and widths of my elements. Any ideas? Also, note that the dummy content in the page is an image for now. I wanted to blur out names, etc. to keep data private.
THANKS FOR ALL OF YOUR HELP!!!
How about something like this...
The left column will only go as far as the right content though. If you want it to expand to the height of the viewport when there's not enough content to fill you'll need some javascript or you'll have to use a repeating background that fills the html
Demo: http://jsfiddle.net/wdm954/KyUfN/
<div id="wrapper">
<div id="left">left</div>
<div id="right">
<div id="content">
<div id="top">top</div>
content
</div>
</div>
</div>
CSS...
/* clearfix */
#wrapper:after, #right:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
#wrapper, #right {
display: inline-block;
}
#wrapper, #right {
display: block;
-height: 1px;
}
/* end clearfix */
#wrapper {
background-color: #000000;
}
#left {
float: left;
width: 300px;
color: #FFF;
}
#right {
margin-left: 300px;
}
#top {
height: 100px;
background-color: #DEDEDE;
border-bottom: 1px solid #B8B8B8;
}
#content {
background-color: #F4EBEB;
height: 600px;
width: 1200px;
}
If the background is the main problem, you can just style the wrapper. This is what I ended up doing for an unruly sidebar, as I didn't want to resort to JS and other solutions didn't work for me. In my case, the issue with the sidebar came because of jQuery tabs, that are part of the theme. When I switched to the tabs, the sidebar wouldn't extend to the full height, so the background wouldn't either.
HTML
<div id="wrapper" class="sidebar-right">
<div id="maincontent">
#content
</div>
<div id="sidebar-right">
#sidebar content
</div>
</div>
CSS
(this presumes 960 grid with 280px sidebar)
#wrapper.sidebar-right{
background: white url('images/bg.png');
background-repeat: repeat-y; /*repeats down the length of the page*/
background-position: 680px 0px; /*moves it into place*/
}
If you have different sidebars, or full-width layouts, change the background image/position and style accordingly. Hope that helps someone.