Does anyone know how to place two repeating elements side by side in following example:
.thumbnail {
float: left;
width: 30px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
.clearboth { clear:both; }
<!-- repeating element -->
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
<!-- repeating element -->
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
The trick is I am already using float and clear properties to style each repeating element individually. But when nesting floated elements within floated elements it does not work.
jSFiddle
check out this
<!-- repeating element -->
<div id="first">
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
</div>
<!-- repeating element -->
<div id="second">
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
</div>
css goes
.thumbnail {
float: left;
width: 30px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
.clearboth { clear:both; }
#first{float:left;}
#second{float:left;}
Related
I'm using Angular Flex to align cards in a row. The cards should wrap into a new line if there are several of them. The relevant settings of the block are
fxLayout="row wrap" fxLayoutGap="40px grid"
fxLayoutGap uses paddings on the inner elements and a negative margin on the container so that the gap is also applied when the inner elements wrap to a new row. So I do not want to remove the grid setting (or the paddings or negative margins in the
In addition, the cards are grouped into blocks with a header and a line on the left. I've created a sample that mirrors the settings that Angular Flex applies. The image is taken from this sample:
As you can see, there is redundant space at the bottom of each group. I want the block and the line on the left to end where the last row of cards (of the block) ends:
You can find the sample on jsfiddle.
How can I adjust the CSS and/or the Angular Flex settings to remove the redundant space and make the line end at the last row of cards while preserving the space between the blocks?
remove the padding-bottom from the last two elements:
#outer {
border-left: 2px solid red;
padding-left: 0px;
padding-bottom: 40px;
}
#outer:not(:first-child) {
margin-top: 40px;
}
#header {
padding: 10px;
margin: 0px 0px 40px 0px;
background-color: red;
}
#container {
margin: 40px -40px -40px 40px;
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
}
#inner {
padding: 0px 40px 40px 0px;
flex: 0 0 50%;
box-sizing: border-box;
max-width: 50%;
min-width: 50%;
}
/* added */
#inner:last-child,
#inner:nth-last-child(2):nth-child(odd){
padding-bottom:0;
}
/**/
#card {
background-color: green;
}
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
I have 5 images and I want them to float left and stay on one line without images being moved to the next line, I also want a border right of 100% I have successfully done this with display: flex, however flex does't work properly in IE 11
Here is my HTML
<div class="col-md-12 award-logos">
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
</div>
And the CSS
.award-logos { border: 1px solid #ccc; }
.award-logos .wrapper {padding: 10px 30px;margin:5px 0;text-align:center;border-right:1px dotted #000; float: left;}
.wrapper img {max-height:150px; padding;}
https://jsfiddle.net/5sw538t7/
I'm trying to center a bunch of divs with a fixed size. I want it to work with a relative/unspecified window size. The code below works so long as the divs don't wrap around to the next line. As soon as they wrap, everything gets aligned to the left. The plan is to dynamically generate lots of these and have it be vertically scrollable only. My CSS skills are pretty weak. Any advice? Thanks in advance.
.container {
margin: 0 auto;
display: table;
}
.block {
background: #999;
float: left;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<!--
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
-->
</div>
</body>
</html>
You can use display:inline-block; instead of float:left and then give text-align:center; to their parent and don't forget to remove extra spaces which is occurred by display:inline-block;
.container {
margin: 0 auto;
display: table;
text-align:center;
}
.block {
background: #999;
/* float: left; */
display:inline-block;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
</div>
</body>
</html>
I think I tried every solution posted here on stackoverflow except the correct solution for sure.
2 hours nothing then give a div an 100% height, very frustating.
Maybe I'm just tired (Night in Germany) and someone see the correct solution in seconds.
Everything looks great, except the div with the class "layout_content_middle" which have an repeatable background image.
The "id=content" div has the correct 100% height, but the conainer div inside the content div doesn't and this is the problem.
Here my current code.
Important note, this is an bootstrap project, so I work with container and grid classes.
html,
body {
height: 100%;
}
#content {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent header and footer by its height */
margin: -80px auto -165px;
/* Pad bottom by header and footer height */
padding: 80px 0 165px;
}
/* Set the fixed height of the header here */
#header {
height: 80px;
}
/* Set the fixed height of the footer here */
#footer {
height: 165px;
}
<div id="header">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="layout_content_top"></div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container" style="max-width: 983px; background-color: red; height: 100%">
<div class="row">
<div class="col-xs-12">
<div class="layout_content_middle">
asdasd asd ad as das d as
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12" style="padding-left: 16px">
<div class="layout_footer"></div>
</div>
</div>
</div>
</div>
You have the !important rule set for height: auto, which overrides your height: 100%, making your height automatic which causes your to expand only as much as necessary to fit the content.
So the following rule needs to be removed:
#content {
height: auto !important;
}
See it in action here:
html,
body {
height: 100%;
}
#content {
min-height: 100%;
height: 100%;
/* Negative indent header and footer by its height */
margin: -80px auto -165px;
/* Pad bottom by header and footer height */
padding: 80px 0 165px;
}
/* Set the fixed height of the header here */
#header {
height: 80px;
}
/* Set the fixed height of the footer here */
#footer {
height: 165px;
}
<div id="header">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="layout_content_top"></div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container" style="max-width: 983px; background-color: red; height: 100%">
<div class="row">
<div class="col-xs-12">
<div class="layout_content_middle">
asdasd asd ad as das d as
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12" style="padding-left: 16px">
<div class="layout_footer"></div>
</div>
</div>
</div>
</div>
You can use position: relative on the parent, then add position: absolute; top: 0; bottom: 0; and left and right if you want to fill the width.
I am trying to split the page into two sections. One left area and right will be the content page. I have the following html but looks like it is not working. Any ideas, what I am not doing right?
<div id="wuiMainArea">
<div id="wuiMainContent">
<div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
</div>
</div>
Like this
<div id="wuiMainArea" style="border: 1px solid;">
<div id="wuiMainContent" style="border: 1px solid;">
<div id="wuiLeftArea" style="border: 1px solid;float: left;">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav" style="border: 1px solid; float: left;">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
#wuiMainArea, #wuiMainContent{
margin: 0 auto;
width: 960px;
}
#wuiLeftArea, #wuiInpageNav{
/* use half of the main content div's width */
/* -2 because of 1px-border on both sides */
width: 478px;
display: inline-block;
float: left;
}
It'll be better to use CSS styling HTML.
Define the widths to fit your needs. Also I recommend using classes instead of ids when appling same styles to multiple elements.