I have a list of dynamically generated divs that represent panels for selecting various options. There are two types of divs, regular ones and short ones. The height of the regular divs is set with javascript to te height of the tallest one. Additionally, if the height of te short div is less than half of the maximum it is set to half of that height, otherwise it is set to the full height.
What I would want to do now (preferably with CSS) is to list those items in such a way that if there is enough space, to put one short div below another sort div.
Here are some illustrations to hopefully make things clearer:
As far as I can see, this is not possible purely with CSS: If you provide the small boxes with clear: left, they will appear below all others. If you don't, they will appear next to each other.
The simplest workaround I can think of is to manually group two small boxes into a separate div. Here's a working example:
<html>
<head>
<style type="text/css">
div.large, div.small { width: 40px; margin: 5px; }
div.large { height: 95px; background-color: blue; }
div.small { height: 45px; background-color: red; }
div.large, div.smallblock { float: left; }
</style>
</head>
<body>
<div class="large">1</div>
<div class="large">2</div>
<div class="smallblock">
<div class="small">3</div>
<div class="small">4</div>
</div>
<div class="smallblock">
<div class="small">5</div>
<div class="small">6</div>
</div>
<div class="large">7</div>
</body>
</html>
There is no generic pure CSS solution.
See a previous answer of mine for a comparison of the candidate techniques:
CSS Floating Divs At Variable Heights
Unless you can use server-side code to manually calculate pixels and use position: relative / position: absolute; top: ?px; left: ?px, you will have to resort to JavaScript to handle the positioning.
This jQuery plugin is generally a good solution: jQuery Masonry
There's also a raw JavaScript version: Vanilla Masonry
I find myself recommending it somewhat regularly:
https://stackoverflow.com/search?q=user%3A405015+masonry
Some possibly relevant demos:
http://desandro.com/demo/masonry/docs/filtering.html
http://desandro.com/demo/masonry/docs/animating-jquery.html
http://desandro.com/demo/masonry/docs/appending.html
Related
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
I've attached a screenshot with this question. There are three columns and I want to keep the height of all the three columns exactly same. I managed to keep the width same with width css property now i wanted to adjust to height. Can anyone help me out in this regard. Thanks in advance.
I would use the following CSS to achieve this:
.wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
.column {
display: table-cell;
}
With table-layout: fixed you're telling every child elements with display: table-cell to have same width, equally distributed based on wrapper's width, as well equal height.
Demo
In pure CSS you can use CSS3 columns: for a 3-column layout just try with
<div style="columns:3">...</div>
(with both -moz- and -webkit- prefixes)
See https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts for the reference, in particular about the height balancing:
Height Balancing
The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.
There is actually no right, cross browser way to do this, but rather you have to resort to some hacks.
A method I have used previously is to wrap the three columns inside a container and set a custom background to the hole container. Basically you create an image, having the same width of the website, having the two vertical lines, and you set it as the background of the container.
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style> .wrapper { background-image: url(wrapper-bg.png); } </style>
You could use a javascript library like http://www.cssnewbie.com/equalheights-jquery-plugin/#.UVwCaZAW200 to achive this. This method however does not work if, the hight of the columns is dinamically changing in height (e.g. you have a collapsable item in it). Of course you can handle this cases by handling those events and recalculating the hight.
Finally you could use height: 100%. It's not as simple as it seems however! This solution does only work for block elements and the size of the parent has to be known. So, if you know the size of the website in advance you can do something like the following:
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style>
.wrapper { height: 1000px; width:900px; }
.column { width:300px; float:left; height: 100%; }
</style>
Hopefully this will become simpler in future....
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
I recently start to learn CSS and table less design.
After reviewing some tutorials now I am involved with converting PSD Mockup to XHTML and CSS.
Most often my problem is to positioning elements and containers.
for example this below design:
I am converting this to CSS and HTML.
I have no problem with styling Input elements.
about main layout it seems two columns layout , right ?
How do I style containers ?
I wrote this code It displays better here.
I divided my page to two containers and valued (float:left) to left container.
As specified in jsFiddle link elements on the left side container had come out of the box (I think its because of float).
I can't set containers position to absolute.
Now please help me to refactor and change my code. And please explain to me how to position elements right ?
i think a
<div style="clear:both;"></div>
before the </div> of the container will work.
edit:
http://jsfiddle.net/xNwAc/5/
Try and have a wrapping element to contain your two columns. with W3C code, you'll want to use floated elements. The elements don't have any padding, you can work on them yourself, but it's a very basic structure to follow:
The CSS:
#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}
The HTML:
<div id="wrapper">
<div id="left"> Left content </div>
<div id="right"> Right content </div>
</div>
You have to set a new formating context on the container, with overflow:auto; eg.
I sugger you to read the specification which is very clear and useful.
As the exclamation point is not a part of the content you can place it as a background image.
I'm creating a full screen (html, body {height: 100%}) web application and have a screen which has a form in the top (approximately) half, and some other information with two buttons in the bottom (approximately) half.
What I'm wanting to do (being a touch screen in an industrial environment) is to make these buttons as big as possible. So they have height: 50% inside the bottom container.
The question is: how do I get the top half to take the height it requires, and the bottom to take the rest? i.e. is it possible with CSS (2.1 preferably, but 3 is good too)?
There's no way to make an element in CSS 2.1 to take up the rest of the space vertically. Block elements, like Div tags, will automatically stretch out to fill a space horizontally, but won't do it height-wise. This means that you can't get something, like a content page or your buttons, to stretch out to fill rest of the empty space.
The best way to achieve something like this is with tricks, or knowing exactly how high each element will be. For instance, if you know the exact percentage that the other elements will be, you can hard-code a percentage into your stylesheet as described, here. Another trick would be by making the bottom element fill the entire window, and hiding the top half with the form.
Tables, however, are the only elements which will stretch to fill a vertical space. That might be the only solution available to you. An example of this is shown below:
<form ...>
<table id="container">
<tr><td id="top">Form elements go here</td></tr>
<tr><td>Buttons go here</td></tr>
</table>
</form>
And the CSS:
#container {
height: 100%;
width: 100%;
}
#top {
height: 200px; /* Replace this with the appropriate height, or remove altogether. */
}
.buttons {
height: 100%; /* Used to stretch the buttons to fill the element. */
}
the HTML:
<div id="c">
<div id="topHalf"></div>
<div id="bottomHalf"></div>
</div>
the CSS:
#c {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#topHalf, #bottomHalf {
height: 50%;
width: 100%;
background: #00f;
}
#bottomHalf {
background: #f00;
}
You can place your buttons inside the bottom half.
try something like this :-
<html style="height: 100%">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%">
<div id="top" style="background-color: #cccccc; height: 50%">form here</div>
<div id="bottom" style="background-color: #eeeeee; height:50%">buttons here</div>
</body>
essentially height:100% just tells the div to be as big as its parent, and this carries on up the chain of parent objects. you'll notice that if you remove the height:100% on the html tag that all the inner children will just collapse up.
hth
EDIT: I just realised this is appropriate if using tables. If using a div then it's a little harder... a JavaScript function to manipulate the height of the bottom element using the style property in the element. Have a look at this previous question that may help with the JavaScript
ORIGINAL ANSWER
Try putting in the CSS for the bottom half of the application
min-height:50%;
Then specify no height in the top half section.
This will mean the bottom half with the buttons will be at least 50% of the screen area being able to become bigger as required and the bottom half will take the remaining section.
Personally I make this a little smaller than what I expect to use, e.g. instead of 50% I may use 30%, this means I'm getting the most out of my screen real estate but it may not be appropriate in your app.
I hope this helps ;-)