I have two divs, once for main page content and the other for a sidebar.
Both have widths set as percentages, so they will keep their proportions if the window is resized. However, the sidebar has a minimum width, since that content can only resize so much before it begins to look broken. When the window is resized small enough that the min-width kicks in, the sidebar begins to encroach on the main page content, because the main page content does not know that it now needs to take up a smaller percentage than the one defined to account for the sidebar. I'm trying to make it so that, when we have enough width, the main content and sidebar can maintain their respective proportions, but when we get to the point where the sidebar content would begin to look broken, the main content adjusts its width more to compensate.
Is there a way to do this with css/html, or will I need to write some JavaScript to calculate the new widths and adjust the values in the stylesheet dynamically?
Here's a (simplified) example of what I have:
HTML:
<div id="maincontent">
<!-- Main page content here -->
</div>
<div id="sidebar">
<!-- Sidebar content -->
</div>
CSS:
#maincontent
{
width: 85%;
}
#sidebar
{
width: 15%;
min-width: 120px;
}
In this example, everything will be fine as-is as long as the browser window is more than 800px wide. But once we drop below 800px, the maincontent needs to now become smaller than 85%, to make up for the fact that 120px is more than 15% of the browser width.
You could try
#media all and ( max-size: 800px ) {
#maincontent { width: 75%; }
}
of course, replace 800px and 75% with the screen size and percent that fits
Is this what you are looking for?
CSS
#maincontent{
background-color:orange;
}
#sidebar
{
background-color:blue;
width:15%;
min-width:120px;
float:left;
}
HTML
<div id="sidebar">
I am the sidebar!
</div>
<div id="maincontent">
I am the main content!
</div>
DEMO: http://jsfiddle.net/HFuCe/30/
Related
I'd like to use a centered, single-column HTML/CSS layout similar to stackoverflow's for both, desktop and mobile use, i.e. very different screen widths and resolutions.
I'd like to avoid having to use code (client or server) to detect and handle devices differently (i.e. deliver different layouts / styles).
The layout
should be centered (currently using centered div using auto property for left and right margins - this requires a fixed width)
should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile
will have header bar that visually extends to the window edges (same as stackoverflow's) and a have footer that should be at the bottom of the page, even if there's not much content (for this, CSS Single-column layout centered fixed-width 100% height w header and footer may have an answer)
Can this be achieved based on a simple centered div such as the following or what is the state-of-the-art? The following is rendered tiny on Firefox for Android:
#center {
margin: 0 auto 0 auto;
width: 10em;
background-color: gray;
}
<div id="center">
Content div<br/>
<ul>
<li>should be centered</li>
<li>should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile</li>
<li>will have header bar that visually extends to the window edges and a have footer that should be at the bottom of the page, even if there's not much content (for this, https://stackoverflow.com/questions/23651942/ may have an answer)</li>
</ul>
</div>
Note I'm using 10em for the width (to make it fit in the snippet editor preview) - is there a more appropriate unit or additional properties for an "absolute" size to ensure readability (and sizing) on all screens?
Desktop:
Mobile:
The awswer you found already gave a big hint in what you should be using for this, namely display: flex;. Building on top of the fiddle provided there, you could do something like this:
Which is giving the main content column a 100% value of width in combination with a max-width of, let say, 768px. In this example flex-grow:1; is used to fill up the height completely but maybe not be necessary for your project.
html,
body {
height:100%;
padding:0;
margin:0;
width:100%;
}
body {
display:flex;
flex-direction:column;
}
#main {
flex-grow:1;
background:#f3f3f3;
max-width: 768px;
width:100%;
margin:auto;
}
header {min-height:50px; background:green;}
footer {min-height:50px; background:blue;}
<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>
I have a little problem --
I have two div on left and right, as my screen resolution is 1280*768, they work fine here. but when I reduce the window size it overlaps each other ... like left one is reduce in width and right one make that happen ...
here is my code..
<div class="shareBar" align="right">
......
</div>
<div class="content">
.....
</div>
and my css code is here
.content{
position:relative;
margin: 110px 5px 10px 5px;
min-width:700px;
}
.shareBar{
position:relative;
}
here shareBar overlaps content...
And I want to make this shareBar always in a static position and when window re-size occurs a horizontal scroll-bar should appears so that content will always in in a static size. Or otherwise shareBar should reside under content.
Is it possible with pure css?
If you want to make .sharebar appear in the same place and provoke a horizontal scrollbar on window resize, you should remove align="right" from the HTML give it position:absolute as well as a specified location in the CSS. For example:
.shareBar{
position:absolute;
left:900px;
}
How can I have div 'lower' fill the lower part of the screen with it's bg image?
Div 'upper' grows depending on the content.
The red line marks the viewport.
Here I have an example how I did it with a table : Splendid
But I want it tableless!!
Warning: This answer does not solve the original problem, I misunderstood his question. What the author wants to achieve is probably impossible with CSS only, because we have a combination of sticky footer, a footer-head that is always visible (like taskbar) and dynamic height of both the main content and the footer.
I'm leaving the snippet for anyone that might look for a sticky footer.
Fiddle: Dynamic Content with Sticky Footer
I used a timer to illustrate filling the 'Upper' Container with content constantly.
Basically you have the following HTML:
<div class="wrapper">
<div class="upper">
<span></span>
<div class="push">
</div>
</div>
<div class="lower">
Footer content goes there.
</div>
</div>
And of course, CSS:
.upper{
min-height: 100%;
height: auto !important;
width: 100%;
height: 100px;
background: blue;
margin: 0 auto -100px; /* The negative value of the footer height. */
color: white;
}
.lower, .push {
height: 100px; /* Footer and Push need to have equal height */
background: red;
color: white;
}
Code explanation:
This is basically the so called Sticky Footer concept on which you can do additional research. You have your main content, you have your footer and we use a little trick with the push container to literally push the footer so it doesn't overlap any of your content.
The extra CSS is just for the sake of the Demo, I hope you can clean it up and implement it the way you need it.
This is not precisely what you are asking for, but you could scrap the bottom div, and add the large background image to body. Apply background-position: center bottom; to make the image hug the bottom of the screen. This will work particularly well if the image has a clear background.
body {
background: url('largeImage.png') no-repeat center bottom;
}
Ummm just set the height of div 'lower'? Or even min-height if you want it to be content flexible.
You could use Javascript to subtract the height of the upper div from the browser's window height, and if the result is larger than 0, set the lower div at that height?
For getting the window size, I suggest using this function. I believe it's cross-platform, though I haven't tested it recently.
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
I have some problems with creating the correct menu bar layout.
My menu bar is divided to three sections which are:
left (logo), center (menu), right (login information)
There are also two different menus, one is for administrator (few additional buttons - width is 701px) and regular user menu (width is 447px ).
Whole menu bar width is set to 100%.
Now what i need help with is setting the width attribute for each of the sections.
If i set fixed width (px) to center (menu) section, i cant figure out the correct width percentage for other two sections. I also cant set fixed width values for other sections because of the smaller screen resolutions (menu stays wide).
If i set percentage width to center (menu) section, menu might break at smaller screen resolutions.
So what is the best solution?
HTML:
<body>
<div id="main">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
CSS:
#main {
width:100%;
height:77px;
background-color:#373737;
}
#left,
#center,
#right {
height:77px;
}
#left {
float:left;
} /* width? % or px*/
#center {
display:inline-block;
} /* width? % or px*/
#right {
float:right;
} /* width? % or px*/
Admin menu bar:
Regular user menu bar:
You can try this CSS and adjust the each width if you wish in percentage to sum up to 100% of the main div:
#main {
width:100%;
height:77px;
background-color:#373737;
padding:5px;
}
#left, #center, #right {height:77px;}
#left {float:left;background-color:black;width:25%} /*width? % or px*/
#center {display:inline-block;background-color:blue;width:50%; float:left}/* width? % or px*/
#right {float:left;background-color:yellow;width:25%} /*width? % or px*/
I think you're probably going to have to use JavaScript to resize your elements as needed. There's several solutions but none of them allow for mixing dynamic and static widths.
Floats are out because they will jump around when you lower your screen size. Unless you want to have them fall below the other sections when its too small.
Just think of each div as an individual element instead of them working together. I'd strongly suggest not using a float in this situation if your goal is cross browser compatibility.
Good luck. :)
How do I set the width of a web page to always be exactly 1000px ? For example, like Facebook or here on StackOverflow. The site just will not resize. If the browser window is smaller than 1000px, the scroll bar is needed. And the page should be centered in the browser.
I can always put content of the page inside <div></div> tags, but I have read that it will not work for all browsers. So what is the right way to do it ?
Enclosing the content in a div that has the CSS width property set to 1000px will work across browsers.
CSS:
div.content { width: 1000px }
HTML:
<body>
<div class="content">
...
</div>
<body>
However, consider using 960 pixels instead of 1000. It is a reliable standard that works on most devices down to a 1024 pixel display width including space for scroll bars and such.
Directly set the body to display at that width:
body {
width:1000px;
margin:0 auto;
}
However, I usually use a wrap div as follows:
html
<body>
<div class="wrap"></div>
<body>
css
div.wrap {
width:1000px;
margin:0 auto;
}