I would like an element to fill the remaining space of a parent div. I have managed to do this, You can see it here "link removed" but the filling div (right) sits underneath the left div. I bascially want the right div to start where the left div finishes.
Hope this make sense.
<html>
<head>
<title></title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:#ff0000;
height:20px;
}
#right {
width: 100%;
background-color:#00FF00;
height:30px;
}
</style>
</head>
<body>
<div>
<div id="left">Nav</div>
<div id="right">This is the space I need to fill but not go underneath the nav div</div>
</div>
</body>
</html>
On #right, simply remove width: 100%, and add overflow: hidden.
See: http://jsfiddle.net/hJzJf/ - (I'm assuming your heights are just for testing purposes)
Why does this work?
See: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
Set margin-left: 180px; on the #right element. This will offset it by the width of the first element.
http://jsfiddle.net/DHSej/
Related
i have a problem about height properties.
i am making a website and a want to make this : there is a div element which collapse others and this has a child div and when i resize the window height then the parent div get the window height . it is ok but child div not fixing so some child elements are is this not showing . those are stay down of child div ... plase help me ...
i want to see full patch of yellow area but when i resize the browser height some p tags stay down ... how can i fix it ? whatever browser height yellow patch must shown ... please help me ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*, *:before, *:after{
padding:0;
margin:0;
box-sizing: border-box;
}
html,body{
height:100%;
overflow-y: hidden;
}
.d{
}
.d1{
height:100%;
overflow:hidden;
position:relative;
}
.d2{
display:block;
position:relative;
background:yellow;
overflow-y: auto;
height:90%;
}
.d3{
height:90px;
background:blue;
}
</style>
</head>
<body>
<div class="d d1">
<div class="d3">
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
</div>
<div class="d2">
<p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>sonososososo</p>
</div>
</div>
</body>
</html>
try using position:inherit for the child divs. Hope this works
You can use css calc.
Jsfiddle
.d2
{
height: calc( 100% - 90px);
}
Height in pixels and percentage together doesn't work great usually. Overflow:hidden hides the 90% div since its beyond the viewport size. Remove overflow:hidden for the parent div, body & html tag to view hidden contents. If there is any specific reason for overflow:hidden to top hierarchy. You can still achieve the same by mentioning percentage values for both child div
According to your code
.d2{height:87%}
.d3{height:13%}
I use center tag, but it seems that is not standard in HTML 5. I tried to use CSS instead but it doesn't work for me! I expect in this example the div tag be displayed in center but it won't.
<!doctype html>
<html>
<body style="text-align:center">
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</body>
</html>
And this is center tag version: (it works)
<!doctype html>
<html>
<body>
<center>
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</center>
</body>
</html>
You can use margin: auto for your div
div {
margin: auto;
width:100px;
height:30px;
background-color:rgb(0,0,0)
}
Also it's better to give your div an id or class name to target it more accurately if your HTML markup become more complex as well as using external CSS instead of inline styles like what you're doing now.
Fiddle Demo
You can use css:
.window{
position:absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-200px;
width:400px;
height:280px;
}
make sure you substract half of the width and height using margins. This way your div will be centered within the window the div is in.
The div tag which you want to put in center in your body must be :
.div-class {
margin: auto;
}
If you use margin top or bottom, you can do this way:
.div-class {
margin-left: auto;
margin-right: auto;
}
So basically I want a side bar and a navigation bar. But when I set the div2 (the side bar) top margin to 110px it moves div1 down with it. Please help me.
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Home.css">
<title>Home</title>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
And the CSS...
body {
background-color:#CCC;
}
#div1 {
width:auto;
height:100px;
background-color:gray;
border-radius:10px;
}
#div2 {
width: 150px;
height: 500px;
background-color: grey;
border-radius: 10px;
margin-top:110px;
}
http://jsfiddle.net/shane__kerr/5p8Qr/2/
Fiddle
Now i did a float:left and width:100% to div1 and clear:both to div2.
Dont forget to add clear:both to any div inside the div1
Change the height in #div1 to auto and set margin-top:100px in #div1, not #div2.
When you add a margin-top to div2, the webpage also creates the other elements to 'trap' that element on its position. To fix this you should use display: inline-block; this way all not given margin is gone.
Why not use float?
Well basically float also sets the display to inline-block but will also position the element. With display-inline only the given margin will be used, without reposition it.
jsFiddle
I thinks your CSS looks good. But I think div 1 and 2 should not be inside each other to achieve what you want.
Try this:
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
Demo here
This should be really easy, but think dealing with brain fog.
Trying to create a page which shows text at center of the page[ vertically / horizontally]
<html>
<head>
<title>Application error</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table>
<tr>
<th style="background-color:#FFFFFF;vertical-align: central">
This should be center of page vertcally/horizontally
</th>
</tr>
</table>
</body>
</html>
The text is aligned in center but right at top of the page - horizonatlly center but vertically.
[tried looking for tag called 'brain freeze' but could not. maybe the admins can make one for such a case]
Use this settings:
table{
position:relative;
margin:0 auto;
top:50%; /* assign manually */
}
body{
height:100%;
width:100%;
position:absolute;
}
jsFiddle:here
Change it to vertical-align: middle;
this JSFiddle shows how to align centerally
Make your CSS as
table {
width:300px;
height:300px;
background-color:#d9d9d9;
position:fixed;
margin-left:-150px; /* half of width */
margin-top:-150px; /* half of height */
top:50%;
left:50%;
}
table th
{
text-align: center;
vertical-align: middle;
}
You shouldn't use tables for designing layout. Use divs instead
<div style="width:100%;height:100%;text-align:center;margin-top:50%;">
<div style="height:20px;line-height:20px;font-size:12px;margin-top:-10px;">This should be center of page vertcally/horizontally</div>
</div>
Notice the margin-top:-10px. That is because the inner div is positioned at 50% of the outer-div. But if you really want it in the middle, you want it to positioned at 50% - "half the height of the inner div" and the height of the inner-div is 20px. The line-height makes sure that text inside the inner-div is aligned in the middle of the div.
Of course you should classes (or id's) instead:
css:
.outer {
width:100%;
height:100%;
text-align:center; //Make sure everything inside the this div is centered
margin-top:50%; //Position the inner-div at half of the height of this div
}
.inner {
height:20px; //Set a specific height
line-height:20px; //Set a line-height (works when only one row of text) to align text vertically in the middle
font-size:12px;
margin-top:-10px; //Position the div upwards (half the height of this div)
}
html:
<div class="outer">
<div style="inner">This should be center of page vertcally/horizontally</div>
</div>
I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height