I want to ask can I make a div to fill the entire remaining space.
I need to make site with 2 parts - one always on top and one always on bottom
You can give me some ideas for this (without position:absolute;)
So here is my idea - 3 Divs with classes:
HTML:
<div class="top"><div>
<div class="center" ></div>
<div class="bottom"></div>
Css:
.bottom{
position:relative;
width:100%;
}
.top{
display:block;
min-height: 250px;
}
.center{
display:block;
min-height:30px;
height:auto;
}
If you give the divs an ID You can use jQuery like so:
$(window).resize(function () {
resizeWindow();
});
function resizeWindow() {
var sHeight = $(window).height();
var tHeight = $("#top").height();
var bHeight = $("#bottom").height();
var nHeight = sHeight - tHeight - bHeight;
$("#center").height(nHeight);
}
The resize part also allows for anyone resizing the screen and if someone with a tablet/smartphone changes the orientation.
What I understand is you want three div's stacked on top of eachother.
<div id="container">
<div class="top"><div>
<div class="center" ></div>
<div class="bottom"></div>
</div>
#container {
width:100%;
height:100%;
}
.bottom{
position:relative;
height:25%;
width:100%;
}
.top{
position:relative;
height:25%;
width:100%;
}
.center{
position:relative;
height:50%;
width:100%;
}
Related
I am trying to create a layout as follows
Here's the CSS I used
#leftcol { width:15%; position:fixed; float:left;background-color:aliceblue;}
#main { width:50%; height:400px; float:right;background-color:black;}
#comments { display:block; width:50%; float:right; height: 500px; }
This is how my Div's are laid out
<div id="leftcol"></div>
<div id="main"></div>
<div id="comments"></div>
Looks like I am missing something. Any help? The height of each div should be flexible to accomodate it's content
I think you want to add a clear to your comments
clear: right;
http://jsfiddle.net/x9rZj/1/
Here you go: Remove the height from all the divs if you want it to be flexible as you add content, you could also add a min-height:200px; so no matter how much content you have its going to be at least 200px high.
http://jsfiddle.net/5tQt2/
try the following styles
<style>
#leftcol { width:15%; height:100%; float:left;background:blue;}
#main { width:50%; height:400px; float:left;background:black;}
#comments { display:block; width:50%; float:left; height: 500px; background:red;}
</style>
<div id="leftcol"> </div>
<div id="main"> </div>
<div id="comments"> </div>
I'm currently working on a website, but it's important that it must fit on every page. I have 5 divs horizontal. The 3 divs in the middle are fixed sizes, 200 px, 400 px and again 200px. Now I have one on the far left and one of the far right, that should be equally big and fill out the screen no matter what resolution you're viewing the website in. So the middle part should be in the middle, and the 2 divs on the left and right of the middle part should fill out the screen. I have tried several techniques explained in other threads, but most are only for the left, or only for the right part and not working for both left and right. Maybe someone has a solution?
My HTML
<div id="left">
test
</div>
<div id="buttonsleft">
test
</div>
<div id="middle">
test
</div>
<div id="buttonsright">
test
</div>
<div id="right">
test
</div>
My CSS
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
}
#buttonsleft{
float:left;
background-color:#3F0;
width:200px;
height:100%;
}
#middle{
float:left;
background-color:#30F;
width:400px;
margin:auto;
}
#buttonsright{
float:left;
background-color:#3FF;
width:200px;
height:100%;
}
#right{
float:left;
background-color:#300;
width:15%;
height:100%;
}
Can be easily done using the CSS table layout.
See that Working Fidde
If the view port is smaller then 1000px wide, then the divs will shrink.
[you didn't specify what should happend if the view port is less then 1000px]
HTML:
<div class="Container">
<div id="left">left</div>
<div id="buttonsleft">buttonsleft</div>
<div id="middle">middle</div>
<div id="buttonsright">buttonsright</div>
<div id="right">right</div>
</div>
CSS:
* {
font-size: 25px;
color: white;
}
.Container
{
display: table;
width: 100%;
}
.Container > div
{
display: table-cell;
}
#left {
background-color:#C00;
}
#buttonsleft {
background-color:#3F0;
width:200px;
}
#middle {
background-color:#30F;
width:400px;
}
#buttonsright {
background-color:#3FF;
width:200px;
}
#right {
background-color:#300;
}
i've built a 3 column layout.
I want to place some Text (heading) over the Image in the middlecontent. But everytime i resize the browser window, the text moves. Any suggestions? I thought, while placing the image in an absolute container (which is itself in an relative one) i can position any absolute layers without the elements moving. Any suggestions?
Here a jsfiddle: http://jsfiddle.net/Dkjsc/3/
UPDATE:
If we remove the height attribute from middlecontent, everything works fine. But is this a way to go?
HTML:
<div id="content" class="content">
<!--LEFT-->
<div id="leftcontent" class="leftcontent"> </div>
<!--MIDDLE-->
<div id="middlecontent" class="middlecontent">
<div id="heading" class="heading">Text</div>
<img src="images/Windows/Window_10.png" alt="" style="width:100%;">
</div>
<!--RIGHT-->
<div id="rightcontent" class="rightcontent"> </div>
</div>
CSS:
html, body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
.content {
position:relative;
width:100%;
height:100%;
}
.leftcontent{
position:absolute;
width:20%;
height:100%;
left:0%;
}
.middlecontent {
position:absolute;
text-align:center;
width:60%;
height:100%;
left:20%;
top:10%;
}
.rightcontent {
position:absolute;
width:20%;
height:100%;
right:0%;
}
.heading{
position:absolute;
text-align:center;
width:100%;
top:12%;
}
You need to put position relative on an element with a fixed size that you want it relative of otherwise it is relative to the window which keeps changing size
I have a holder div that's shrink wrapped around a couple other divs, so the holder doesn't have a set width. Also inside the holder is another div that contains text. When there's too much text it's expanding the holder so it's not shrink wrapped anymore. Here's a demo of my problem, http://jsfiddle.net/WSbAt/. This is for a photo gallery page.
I'm thinking there might not be a way without setting the width of the holder, which I can't do since the number of images per row is dynamic. I can probably figure it out with jQuery, but was hoping there's a css solution.
Edit: I'm trying not to specify any widths since the number of thumbnails per row is based on your window size.
Demo: http://jsfiddle.net/WSbAt/
CSS:
#container
{
width:600px; /*only set for demo. will be random on live page*/
border:1px solid black;
text-align:center;
}
#holder
{
display: inline-block;
border:2px solid blue;
}
.thumbnail
{
float:left;
width:100px;
height:100px;
background-color:red;
margin-right:10px;
margin-bottom:10px;
}
.expandedHolder
{
padding:10px;
border:2px solid yellow;
margin-bottom:10px;
margin-right:10px;
}
.fullImage
{
float:left;
width:250px;/*only set for demo. will be random on live page*/
height:200px;
background-color:green;
}
.text
{
float:left;
margin-left:10px;
}
HTML:
<div id="container">
<div id="holder">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div style="clear:both;"></div>
<div class="expandedHolder">
<div class="fullImage"></div>
<div class="text">some text here. some text here. some text here. </div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
Use a percentage as width for .fullImage and .text
.fullImage
{
float:left;
width:70%;
height:200px;
background-color:green;
}
.text
{
width: auto;
float:left;
width:20%;
margin-left:10px;
}
Then if the text gets to large use text-overflow
text-overflow:ellipsis;
or overflow
overflow:hidden;
http://jsfiddle.net/RubenJonker/WSbAt/5/
I'm trying to do the same, with pure CSS. I found a hacky way that works in Chrome (I haven't check other browsers yet).
#container {
display: table-caption; /* Shrink the container */
border:1px solid black;
text-align:center;
}
I used jQuery to calculate what the text width should be. If anyone is curious, this is how you would fix my example.
var textDiv = $(".text");
textDiv.hide();//hide the text to get holder width without text
var holderWidth = $("#holder").width();
var imageWidth = $(".fullImage").width();
var textWidth = (holderWidth - imageWidth) - 45;
textDiv.css("width", textWidth + "px");
textDiv.show();
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>