I have a Map<Category, List<Link>> that i'm iterating over in my jsp:
<c:forEach var='entry' items='${categoryToLinkMap}'>
<div class="category_section">
<h2>${entry.key.name}</h2>
<ul>
<c:forEach var='item' items='${entry.value}'>
<li>
${item.label}
</li>
</c:forEach>
</ul>
</div>
</c:forEach>
With the following CSS
.category_section {
float: left;
width: 300px;
height: 200px;
}
What I'm trying to achieve is a maximum of 3 sections horizontally, any more than that wrapping under. My CSS works as I want with the one drawback being I have to set the height or the div sections are all over the place. If I set the height and a category contains many items then the links overlap.
What's the best way to achieve this using CSS? Any thoughts on a different approach? I'm very new to front-end stuff so if it could be done better please let me know.
Edit: Here's a quick mock-up of what I'm trying to do:
a different approach would be to use nested UL's and float left the li's of the first UL in the hierarchy.
with your code use the clearfix css hack to auto expand floated divs:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Related
I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle
.page_header_style {
border: 1px solid blue;
}
.title_style {
text-align:center;
}
ul {
list-style: none;
}
li {
display: block;
}
.user_style {
float: right;
margin-top: 0px;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
I would like to see the second div i.e., Welcome message & a list in the same line of the title, keeping the title at the center.
In order to make the "title" text in the center viewport wise, you can make the "user info" as position:absolute, so it will be out of the normal content flow. See the demo below.
.page_header_style {
border: 1px solid blue;
padding: 20px 0;
position: relative;
}
.title_style {
text-align:center;
}
.user_style {
position: absolute;
top: 10px;
right: 10px;
list-style: none;
padding: 0;
margin: 0;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
JSFiddle Demo: http://jsfiddle.net/wt5f81qz/
You should apply float: left to the .title_style, and put a clearing element (clear:both) on the bottom of inner content of .page_header_style
Here: http://jsfiddle.net/r1af39at/
Kosturko answer regarding clearfixes
You can alternatively use the clearfix solutions with is better than adding clear:both to an element, because in some case you'd need extra markup to apply clear:both.
The both clearfixes are applied to the immediate parent containing the floating elements.
Clearfix 1: is just to apply overflow:hidden; this works but can cause styling issues if say you wanted something to flow outside the parent using position absolute for example.
The better clearfix is to use the micro clearfix, best applied using a CSS preprocessor.
Good luck
By default, div elements have the display: block; attribute. Without other css styling, browsers will render them below the last block element. Try using the display: inline-block; as this will treat each div as an inline element, but treat its contents as the contents of a block element.
For example, the following css will display the main title and both list elements on the same line.
li{
display: inline-block;
}
div {
display: inline-block;
}
See w3schools's page on the display property for more on this.
I'm trying to make two boxes where to put a chart and I'd like them to have same width for the entire width of page and autoresizing when I resize the page:
<style>
#middle_row_contents li {
display: inline-block;
list-style-type: none;
padding-right: 2em;
*display: inline;
}
</style>
<div class="middle_row_box">
<ul id="middle_row_contents">
<li>
<div class="hours_rooms_used">
<div><h3>Meeting hours per room</h3><select id="years_rooms_used"></select></div>
<div class="tab_rooms_used"><canvas id="chart_rooms_used"></canvas></div>
</div>
</li>
<li>
<div class="hours_per_customer">
<div><h3>Meeting hours per customer</h3><select id="years_rooms_customer"></select></div>
<div class="tab_rooms_customer"><canvas id="chart_per_customer"></canvas></div>
</div>
</li>
</ul>
</div>
I tried to put width: 50%; on both and assing width: 100% on middle_row_box's div but it didn't worked...how I could do that? And if I put two elements like and a inside a , shouldn't they appear side by side since in my case looks like in a new row?
Cheers,
Luigi
You need to set width to LIs too. How they should know you want to resize them?
#middle_row_contents {margin: 0; padding: 0;}
#middle_row_contents li {
display: inline-block;
list-style-type: none;
padding-right: 2%; /* ems and % aren't compatible, use the same units */
*display: inline;
width: 47%; /* lower than 48% because of a white-space gap between inline-block elements. Use float to avoid this gap. */
background: red;
}
http://jsfiddle.net/x98g7c3k/
Try this javascript snippet
document.getElementById("hoursd_per_customers").style.width = (document.getElementById("hours_rooms_used").clientWidth - 10) + "px";
Hope it will work.
For more details, Click here...
I need to find a way to clearfix a set of floated elements without extra markup.
For example, I have a 2 columns grid in section#main_features. Each div.feature has width: 50% and is float: left. What I want is to find a way to clearfix the rows without extra html markup (since I want to make a simple semantic grid).
<section id="main_features">
<div class="feature">
...
</div>
<div class="feature">
...
</div>
<div class="feature">
...
</div>
<div class="feature">
...
</div>
</section>
Note that the rows here are just a "concept" (each row is two .feature). I'm using a semantic approach to build this grid, therefore I don't want to need to wrap the columns of each row and then clearfix this wrapper. I'm looking for some trick to clearfix and break the row using only css - or scss, less, etc.
This problem seems to be more complex than it looks.
Thanks in advance.
I have been using the semantic group 'micro clearfix' which I found on CSS Tricks.
.group:after {
content: "";
display: table;
clear: both;
}
The CSS is similar to the above solutions, however the concept is that you can add it to any element which you wish to 'group' together and be followed by a clear. Eg:
<header id="masthead" class="group">
//content
</header>
The above link also has sub-IE8 rules.
EDIT My apologies, I just answered the title of the question, without properly reading your scenario. I would not use floats in this case. Instead, I like to use display: inline-block like so:
#main_features {
font-size: 0; /* this resets the default padding created by the inline-block rule below */
margin: -2%; /* offsets the positive margin below */
}
.feature {
display: inline-block;
vertical-align: top;
width: 46%;
margin: 2%; /* width + (2x margin) = 50%*/
font-size: 12px; /* because it is reset to 0 by parent */
}
The font is set to zero on the parent element because some browsers add padding to an inline-block element. The parent element also has a negative margin to offset that of its children. This allows the content to align with the rest of your page.
I have made a basic demo of this here.
You can use the css :after to do this, just by putting an invisible full stop after it, forcing the clear fix.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Alternatively, I just found this newer one from Beau Smiths answer here
/* For modern browsers */
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
zoom:1;
}
If you have been applying clearfix with a class-name and the appropriate selector (.clearfix), then you can do the same with the selector #main_features
So if your normal clearfix style declarations look like this:
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
...then you can avoid having to apply the clearfix class simply by adding to the selector this way:
.clearfix:after, #main_features:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .clearfix, *:first-child+html #main_features { zoom: 1; } /* IE7 */
...and just leave your markup as-is.
It's an quiet old question but I just stumbled upon it while having a similar question. Anyways I solved it by using the nth-child pseudo selector to clear the float every third child within the container.
.main_features .feature:nth-child(3n) {
clear: left;
}
On this site: http://walkman.pk/aserdus2/tagok.php
I have two background-images on the left and right side, which doesn't appear, and I can't figure it out why ?
Every other page of the website works fine. It seems that some <div> elements are not closed properly. When I watch it with chrome inspector, I see that the content div is very thin, but I don't understand the reason of this.
What should I do to show up the images?
You have only floating elements inside #content, so its height is zero. You can fix this by setting overflow to something other than visible:
#content {
overflow: hidden;
}
Voilà:
That's because both elements with class block are floating and therefore the element with id content has no height (which has the background images). So you need to give height to the content element (height: 250px) should solve the problem.
Add this to your #content {}:
height: 600px; (or however high the images are)
I tried it with Inspect Element and the pictures appeared.
Good luck!
Try
<div id="content">
...
<div style="clear:both"></div>
<!-- CONTENT END -->
</div>
OR
http://www.webtoolkit.info/css-clearfix.html
<div id="content" class="clearfix">
...
<!-- CONTENT END -->
</div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Here is the bug I am trying to fix:
image of bug http://img26.imageshack.us/img26/9008/bild292.png
I have tried everything and am out of ideas now, here's what it should look like:
ideal output http://img809.imageshack.us/img809/3508/bild293.png
The site is: http://mobilova.de/index.php.
You need to clear your floated element. You can use a clear fix as others have suggested or you can simply assign overflow:hidden or overflow:auto to .inside and #red-box. The only thing keeping #red-box from collapsing is the min-height. You will then be able to adjust the margin you have set on the button element and it will now take effect since it has been cleared.
CSS:
#red-box{
overflow:hidden;
}
.inside{
overflow:hidden;
}
Is it trying to float? Add the following div below it:
<div style="clear: both;"></div>
Otherwise, the height of your button will not push down the rest of the content.
You need to add this clearfix to your CSS:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Then, you need to add clearfix to the classes of div#mf15. This fixed the issue for me.