So if the parent div's height is 100% then you can set the child to 100% and it will work.
But if the parent's height is decided by content then the height attribute doesn't seem to work.
Is there a decent workaround that would work on most browsers?
<html>
<head>
<style>
#content img
{
display: block;
}
#left
{
float: left;
}
#right
{
float: left;
width: 200px;
border: thin solid;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
<img src="images/dc_logo.png"/>
<img src="images/dc_logo.png"/>
<img src="images/dc_logo.png"/>
</div>
<div id="right">
stretch full height plz
</div>
</div>
</body>
</html>
No, there isn't, and it's a shame. There are little tricks to emulate the effect, but those are situational. For example, if you have a sidebar and a main content area, you can surround them in a container, and give the container a background the repeats vertically to look like it's the sidebar. Or you can use JavaScript to dynamically calculate the size onload. But unfortunately, purely CSS-wise you're stuck.
Related
I am building a website and I am using 2000px wide images. I want the images to be visible on wide screens (like mine - im using TV as monitor) but the smaller screens will only see the images size adequate to their size. (rest will be cropped). The problem is that the image must be centered no matter what size the viewport is. I have used text-align:center; to make the text responsive. I did read the similar topics but no matter what I do the image stays static and not centered. Please help.
HTML:
<body>
<div id="wrapper">
<div class="header">
<img src="images/design/header.png">
</div>
<div class="nav-bar">
Home
About
Portfolio
Gallery
Service
Contact
</div>
<div class="side-bar">
<h1>This is my side bar</h1>
</div>
<div class="content">
<h1>This is my content</h1>
</div>
<div class="footer">
<h1>This is my footer</h1>
</div>
</div>
</body>
CSS:
#wrapper {
max-width: 2000px;
margin: -8px;
overflow: hidden;
text-align: center;
}
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this: Get the screen size using mediacheck and then set up thresholds using #media.
Use the following css to make the image center. max-width:100% will fit the image if the container is smaller than the image width. the image width and height will be reduced to fit.
#wrapper > .header img
{
display: block;
height: auto;
max-width: 100%;
margin:0 auto; /* to make the image center of its container, if container is larger than image size */
}
Update
If you know the exact height of the image, then please see this fiddle. Resize fullscreen to see the image cropping.
HTML:
<div class="position-img-outer">
<div class="position-img-inner">
<img src="http://placehold.it/1000x300" class="position-img" alt="img" style=" height: 300px; " />
</div>
</div>
CSS:
.position-img-outer
{
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.position-img-outer .position-img-inner
{
display: inline-block;
position: relative;
right: -50%;
}
.position-img-outer .position-img-inner .position-img
{
position: relative;
left: -50%;
}
If you know the width of the images, you can use the following:
#wrapper .header img{
position:relative;
width:2000px;
left:50%;
margin-left:-1000px;
}
UPDATE:
To avoid a horizontal Scrollbar, you can set the container element to width:100% and overflow:hidden
#wrapper .header {
position:relative;
width:100%;
overflow:hidden;
}
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
Quite simple question but tried about everything.
what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.
This is the css line i have now:
.container { width: 100%; float: left; display: inline; }
I cant get them to line up next to each other.
Here is a visual to make it more clear.
image url for bigger preview: http://www.luukratief.com/stackoverflow.png
The scrolling part is not the issue for me, just the placement of the divs.
Is this possible using percentages or is this simply not possible.
If so, please tell me how to do this with css.
Thanks in advance!
You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.
For example:
<div class="container">
<div class="contentContainer"></div>
<div class="contentContainer"></div>
</div>
And CSS:
.container {
width: 200%;
}
.contentContainer {
width: 50%;
float: left;
}
How does this look to you?
http://jsfiddle.net/2wrzn/19/
Note that the border isn't required. I was using it for testing. Turning it on also makes one of the divs wrap around, so it's turned off.
you should use display: inline-block; instead of float anf then wrap all five divs in another container or use the body element and add white-space: nowrap to it.
If the design is incredibly pixel perfect, you can remove the actual "word-spacing" between the inline-blocks by removing the whitespace in the HTML or by giving them a negative right margin of about 0.25em; but if scrolling to new "page" you dn't notice it anyway..
Example Fiddle
HTML Code:
<div class="container" id="p1">Page 1 => Next page</div>
<div class="container" id="p2">Page 2 => Next page</div>
<div class="container" id="p3">Page 3 => Next page</div>
<div class="container" id="p4">Page 4 => Next page</div>
<div class="container" id="p5">Page 5 => Next page</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%;}
body {white-space: nowrap;}
.container {
display: inline-block;
width: 100%;
height: 100%;
}
.container {
display: inline !ie7; /* for working inline-blocks in IE7 and below */
}
.container * {white-space: normal;}
#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}
If you want them next to each other then they can't be 100%. width: 100% will force the div to take up the full width of it's containing element, in this case the full width of the window I guess.
If you want two screens next to each other you'd need to set the width of each to 50%. If I've misunderstood you're question add a bit more detail.
You could try something like this, but you may have compatibility problems with IE and table* (but you can consider http://code.google.com/p/ie7-js/ to fix that)
<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>
The % width of the divs is a percentage of the width of the tags they are contained in and ultimately the body tag (i.e. not the window). So the body tag must be 100 * n where n is the number of div tags you want side-by-side. The example below has 2 div tags thus the body is 200% (2 * 100). Each the div tag's; width is a percentage of the body tag's width roughly 100 / n (need a smidgen less). Don't forget to factor in margin and padding. Here's an example:
<html>
<head>
<style type="text/css">
body{
width:200%;
margin:0%;
padding:0%;
}
#dvScreen1, #dvScreen2{
width:49.95%;
height:80%;
clear:none;
}
#dvScreen1 {
float:left;
border:solid black 1px
}
#dvScreen2{
float:right;
border:solid blue 1px
}
</style>
</head>
<body>
<div id="dvScreen1">
<p>Screen 1 stuff ...</p>
</div>
<div id="dvScreen2">
<p>Screen 2 stuff ...</p>
</div>
</body>
</html>
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.
here is my css:
html {
height: 100%;
}
body {
height: 100%;
width: 300px;
margin: 0px;
}
div.div1 {
height: 100px;
background-color: red;
}
div.div2 {
background-color: blue;
height: 100%;
}
<div class="div1"></div>
<div class="div2"></div>
the problem is that I want body to be float-based but without scrolling inside it.
The doctype is sctrict. Browser: ff3. Is it possible?
you can add one more div in div2 to display content in it.
actually that div will have 100px top margin to avoid top div overlapping on your content.
div2 will extend from top to bottom but top 100px won't be used by content div.
so trick is, keep div1's height same with content's top margin. then it'll be fine
html:
<body>
<div class="div1">div1 div1 div1 div1</div>
<div class="div2">
<div class="content">
<div2 test <br/>
<div2 test <br/>
<div2 test <br/>
<div2 test <br/>
</div>
</div>
</body>
and css will be something like:
html,body {height:100%;width:300px;margin:0px;}
div.div1 {height:100px; background-color:red; position:absolute; width:300px;}
div.div2 {background-color:blue; height:100%;}
div.content {margin-top:100px; float:left; width:100%;}
if you want to hide scroll completely just add overflow:hidden to div.div2
also you can give same background color to container make div2 look seamless.(it wont extend after scroll.)
div.content {margin-top:100px; float:left; width:100%; background:blue;}
cheers