I have looked at this question which has been suggested as a duplicate:
Make a div fill the height of the remaining screen space
However it's from 2008 and is fairly old. I'd rather not use Javascript or tables to solve this and would prefer a CSS solution if at all possible.
Here's the code for the container divs up to and including the left hand nav:
/* Header Wrapper */
#header-wrapper {width:100%;height:120px;margin:0 auto;background:transparent url(/images/Structure/blue-transparent-repeat2.png);background-position:50% 50%;}
#clouds {height:120px;width:100%;margin:0 auto;background:transparent url(/images/Structure/clouds.png) repeat-x;background-position:50% 50%;}
#opaque {width:100%;margin:0 auto;height:120px;background:transparent url(/images/Structure/white-transparent.png);}
#header-content {margin:0 auto;position:relative;width:100%;max-width:1280px;height:85px;}
/* Content Wrapper */
#content-wrapper {float:left;background:url("/images/cream.jpg") repeat-x;width:100%;}
#shell {height:100%;width:100%;background:#fffef8 url("/images/Structure/signpost.gif") 5% 100% no-repeat}
/* Page Content Wrapper */
#page-outer{height:100%;margin:0 auto;padding:0 0.5% 8px;max-width:1280px;}
#page-content {height:100%;clear:both;margin:0 0.7%;}
/* Left Nav */
#left-nav {padding-top:7px;border-right:1px solid #ede9e8;float:left;width:20%;margin:0 0 110px 0;background:url(/images/header-repeat-left.png) repeat-y;background-position:right top;}
And here's a simplified page code showing the main content divs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inside <%=server.HTMLEncode(Session("PublicFranchiseName"))%> Business Directory and Local Guide – Your Inside Guide to <%=server.HTMLEncode(Session("PublicFranchiseName"))%></title>
</head>
<body class="home">
<div id="header-wrapper">
<div id="clouds">
<div id="opaque">
<div id="header-content"></div>
<div class="menu2"></div>
</div>
</div>
</div>
<div id="content-wrapper">
<div id="shell">
<div id="page-outer" class="clearfix">
<div id="page-content" class="clearfix">
<!--Start Left Nav-->
<div id="left-nav">
First of all sue the content in the left-nav bar is causing it to stretch so long. so if you want that , add more content. other way you can use height attribute and set it as long as you can. from what i understand html all elements are arranged according to width and once it runs out of screen they stack down .. since your div is 20% width , adding more elements will cause it to stretch downwards . Vote up if i am right !!
Instead of using floats use display: table; on the parent and display: table-cell; on the children. This will effectively "float them left" and also stretch their height to 100% of the parent.
Because I can't see your markup I can't provide an example, but you should be able to follow :)
I ended up fixing this using JS in head.css:
<script type="text/javascript">
matchColumns=function(){
var divs,contDivs,maxHeight,divHeight,d;
divs=document.getElementsByTagName('div');
contDivs=[];
maxHeight=0;
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute "equal"
if(/\bequal\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
maxHeight=Math.max(maxHeight,divHeight);
}
}
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
window.onload=function(){
if(document.getElementsByTagName){
matchColumns();
}
}
</script>
Related
Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>
I've got this image here, Just a simple bootstrap website.
Heres the code for it. I've tired 100% height as you can see but its not working ,I'm wanting the black background to be full height of the screen.
<div class="col-md-8" style="background-color:#333333; height:100%">
<p style="color:white; padding-top:10%; font-size:80px" align="right">Some</p>
</div>
<div class="col-md-4" style="background-color:#ffffff;">
<p style="color:#333; padding-top:20%; font-size:80px">Text</p>
</div>
In order for percentage heights to work, there needs to be a height set on the parent element. If the height of the parent is a percentage, then it will require it's parent to have a height set on it also. This is the reason why simply applying html, body { height: 100%; } might/is not working - your element might not be a child of the <body> and therefore breaking the chain.
For example, does not work, chain is broken:
<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="no-height-set">
<div class="no-height-set">
<div class="percentage-height-set"></div>
</div>
</div>
</body>
</html>
Works, chain is unbroken:
<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="percentage-height-set"></div>
</body>
</html>
Since percentage heights require a height to be set on their parent element the math might look like this:
[parent height] * [percentage height of child] = [pixel height of child]
And what you're doing:
?? * .05 = ??
With a set height on parent:
500px * .05 = 25px
In css:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
Make sure, that your div isn't a child of another div
I'm doing a website for a school work, but when I resize the screen and make it a little wider, the div elements are getting out of their place.
How can I prevent this?
most of the divs are:
.menu {
padding-top:120px;
position:absolute;
color:white;
font-size:28pt;
font-weight:Bolder;
}
My html:
<body id="BODY" class="BDNL" onResize="MOSTRA()">
<div id="resizing" class="">
<div id="intro" class="divintro">
<p id="p" class="comeco">Trabalho Interdisciplinar Orientado:</p>
<p id="texto" class="txtcomum">
Trabalho no qual um grupo deve elaborar um site que <br />
relacione todas as matérias técnicas estudadas.
</p>
</div>
<form>
<div id="menu" class="menu">
<label>RECO</label>
|
<label>LOCO</label>
|
<label> LP1</label>
|
<label> LP2</label>
|
<label> INFO</label>
</div>
</form>
</div>
</body>
You might want to look into the min-width and width properties of CSS.
Okay. Your HTML looks quite messy.
First of all, please start indending your code for the sake of your own eyes.
<html>
<head>
<title>Page title</title>
</head>
<body class="BDNL" onResize="MOSTRA()">
<div id="resizing">
<div class="menu">
RECO|
LOCO|
[--]
</div>
<div id="intro">
<p>
<h1>Trabalho Interdisciplinar Orientado</h1>
[..]
</p>
</div>
</div>
</body>
</html>
This is the minimal HTML-source you need to achieve the structure you desire.
Why exactly are you using position:absolute; on the .menu, I guess you want it to be positioned on top of the actual content?
I moved the .menu above the #intro container.
Use the following CSS to achieve the result you may want:
.menu {
margin: 0 0 30px 0; /* bottom margin 30px */
}
.menu a {
margin: 0 20px; /* left, right margin 20px; top, bottom 0 */
}
Also
please decide wether you want to use classes or IDs on your elements, in most cases you won't need both,
get rid of redundant classes and IDs (<p class="p"> or <p id="p"> do not make sense),
use the propper html elements for your content. Use <h1> - .. tags for headlines instead of differently styled paragraphs.
Make yourself familiar with CSS Margins and get rid of multiple .
As mentioned in your other question, you might want to give your elements (for example .menu) a fixed (min-)width which prevents the element from getting too narrow:
.menu {
min-width: 300px;
}
I have a question about a problem, of which I originally thought, that it would be fairly simple to solve. But apparently it is not - at least not with only CSS.
This is the basic situation:
<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
<div id="top" style="margin:5px;width:400px;background:#ffffff;">
</div>
<div id="content" style="margin:5px;width:400px;background:#ffffff;">
</div>
</div>
I have a wrapper div that fills up 90% of the screen height and two inner divs. The first div "top" contains some varying elements. The second div "content" should fill out the remaining space of the wrapper div.
So far, I haven't found a way to set the div "content" to fill up the remaining space - even if I would know the exact height of the div "top" as I only know the relative height of the wrapper div.
Thus, I would be happy to learn of a method to either the div "content" to fill up the remaining space or how to mix relative and absolute sizes (i.e. height:100%-100px).
There is currently no cross-browser solution to achieve what you're trying with div elements and CSS. You can however get the behavior you want with the tried and true method of using a table instead.
<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>
<body>
<table id="wrapper" role="presentation">
<tr>
<td id="top">Top</td>
</tr>
<tr>
<td id="content">Content</td>
</tr>
</table>
</body>
</html>
EDIT:
It appears I stirred a nest of hornets with my answer. There seems to be a near-religious following of people who say using tables for layout is bad. In many cases that is absolutely true, however there are situations where a table will do what CSS cannot. This is one of those situations, where a CSS alternative is on the horizon, but most browsers do not support it yet. It is up to the site designer to decide whether he wants to have a layout with cross-browser functionality now, or use a pure CSS layout with its limitations that may become easier to maintain in the future.
Your HTML code is really wrong:
don't use comma's after attributes
don't use inline CSS, put all CSS in a stylesheet and load the stylesheet in your HTML page
CSS syntax is: propertie: value; example: width: 10px; not: width=10px
To use 100% - 100px you can use CSS3 calc, but this feature has less browser support. You can use JS to make a sort of calc function.
There is no cross-browser way to get the content div to fill all available space with CSS, but it is fairly easy to make things look as if it did:
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff;
}
#top {
border-bottom: 5px solid #aaaaaa;
}
#content {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
This should be sufficient for most situations, unless you want to use something like an onmouseover handler on the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<style type="text/css">
body { margin:0;padding:0;}
</style>
</head>
<body>
<div>
<div style="width:1000px;margin:0 auto;">
<div style="width:700px;display:inline-block;">1</div>
<div style="width:300px;display:inline-block;">2</div>
</div>
</div>
</body>
</html>
I want these blocks flush, but currently the second block is pushed down..
If I change the width of second block to 296px then it works..
I don't want to use float:left because it will require one more block with clear:both;.
This is what you have at the moment, but reduced in size:
I don't want to use float:left because
it requires one more block with
"clear:both;".
With float: left, you can clear/contain the floats without adding an element with clear: both. You can do this by adding overflow: hidden (or clearfix) on the parent element.
Without overflow: hidden
With overflow: hidden
If you want to stick with display: inline-block..
The first thing you need to do is remove the whitespace between the two divs.
With whitespace
Without whitespace
If you want to add a border, you can add wrapper elements and add the borders to that.
Or, you can use box-sizing: border-box as shown here.
If you want to use 2 elements in line (1000px total for 300+700px) - just set font-size:0 for container. This is very logical in this case and now you can use all benefits from inline-blocks, like align:justify!
You can only give display:inline-block to elements that are naturally inline (e.g. span, a)
Otherwise your element won't render correctly in older browsers (e.g. IE7-)
Include the width of the border in the width of the div.
If you want it to appear 300px wide on the screen, make it 298px (+1px for the left border, +1px for the right border = 300px). This is also true for padding.
Read up on the w3 box model versus the IE box model.