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();
Related
This question is an extension of Expand a div to take the remaining width.
The top solution works great for having a div take up the remaining width, but one I place an input in the left div it breaks. My expectation is that the input would expand to fill the remaining width of the div but instead it jumps out of the div and is placed in the bottom.
Note the red box correctly fills the width while the blue box is a fixed with. I need an input box to be doing the same as the red box: fill the remaining width.
http://jsfiddle.net/fct87qpn/
<div class="container">
<div class="right"></div>
<div class="left">
<input type="text" class="text"/>
</div>
</div>
The solution is already in your provided link:
.left {
overflow: hidden;
}
JSFiddle
Another solution would be to add a margin:
.left {
margin-right: 200px;
}
The first one is more flexible, though.
.container {
position:relative;
width:100%;
height:200px;
border:1px solid;
}
.right {
height:200px;
width:200px;
background:green;
float:right;
}
.left {
width:-webkit-calc(100% - 200px);
height:178px;
background:red;
}
.text{
position:relative;
width:100%;
height:20px;
margin:0;
border:0;
top:178px;
}
<div class="container">
<div class="right"></div>
<div class="left">
<input type="text" class="text"/>
</div>
</div>
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 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%;
}
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>