The problem I'm having can be better describe in code.
I have some HTML like following
<div class="page">
<div class="slider-wrap">
<div class="products ">
<div class="product"></div>
<div class="product"></div>
</div>
</div>
</div>
<div class="page">
<div class="products">
<div class="product"></div>
<div class="product"></div>
</div>
</div>
And the CSS code look like this,
.page {
clear: both;
.products {
.product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
}
}
Now these codes results in all the DIVs with ´product´ class to have a background green.
What I'm looking for is, how can I, not apply ´product´ styles for ´slider-wrap´ container. That means, the first page container's product will not be green.
Use CSS selector >. What the > does is that it calls that CSS function only when its a direct parent.
So by assigning .page > .products , the css rules you applied will only take place if .page is the direct parent of .products.
.slider-wrap comes in between the .page and .products, so that particular section won't get affected as .slider-wrap is now the direct parent.
You can read more about this at https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
Try this:
.page {
clear: both;
}
.page > .products .product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
<div class="page">
<div class="slider-wrap">
<div class="products ">
<div class="product">1</div>
<div class="product">1</div>
</div>
</div>
</div>
<div class="page">
<div class="products">
<div class="product">2</div>
<div class="product">2</div>
</div>
</div>
You may instead :not(), filter only direct children > from the .page class:
.page {
clear: both;
> .products {
.product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
}
}
https://codepen.io/gc-nomade/pen/YzKJQmv
You can target it using :first-of-type to overwrite the styles.
.page {
clear: both;
}
.page .products .product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
.page:first-of-type .products .product {
background: tomato;
}
<div class="page">
<div class="slider-wrap">
<div class="products ">
<div class="product"></div>
<div class="product"></div>
</div>
</div>
</div>
<div class="page">
<div class="products">
<div class="product"></div>
<div class="product"></div>
</div>
</div>
You can use this instead of :not
.page {
clear: both;
.products {
.product {
float: left;
margin-bottom: 20px;
width: 200px;
height: 100px;
border: 1px solid #ff0000;
background: green;
}
}
.slider-wrap{
.products {
.product {
background: yellow;
}
}
}
}
Related
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
Can somebody help me to understand how to make 6 elements look like on the picture (videos part)?
Here's what I have so far:
.videos {
width: 730px;
height: 400px;
float: left;
margin: 15px 5px 15px 0px;
}
.videos > div {
display: inline-block;
}
#big {
height: 200px;
width: 400px;
background-color: #fff0e0;
}
#small {
height: 90px;
width: 200px;
background-color: #fff0e0;
}
<div class="videos">
<header>
<h2>Videos</h2>
</header>
Browse all videos
<br>
<div id="big">Big video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
</div>
Part of your problem is that widths and heights do not include the sizes of the margins. So if you have, say, a 6 pixel margin between everything, and the bigger rectangle is 200px high, the smaller rectangles need to be 97px high to make everything line up.
Then there's the problem of spaces: with inline-blocks, newlines in the source take up a space horizontally, which throw things out of alignment. I changed the inline-blocks to floats.
And you can't have duplicate ids in a HTML document. I needed to change the ids to classes.
(This doesn't really matter for CSS, but it would be a big problem in other cases, so it's best to play it safe and not have errors.)
You also missed a / in the source; the second <h2> should have been </h2>.
That's about it.
.videos {
width: 630px;
height:400px;
margin: 15px 5px 15px 0px;
}
.videos > div {
float: left;
margin: 0 6px 6px 0;
background-color: #fff0e0;
}
.big {
height: 200px;
width: 400px;
}
.small {
height: 97px;
width: 197px;
}
<div class="videos">
<header>
<h2>Videos</h2>
</header>
Browse all videos
<br>
<div class="big">Big video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
</div>
Simple Example:
HTML
<div id="left-wrapper-lg">
<div class="big-col">
</div>
<div class="small-col">
</div>
<div class="small-col no-margin">
</div>
</div>
<div id="left-wrapper-sm">
<div class="full-col">
</div>
<div class="full-col">
</div>
<div class="full-col">
</div>
</div>
CSS
#left-wrapper-lg {
float:left;
width:64%;
margin-right:2%;
}
#left-wrapper-sm {
float:left;
width:34%;
margin-right:0;
}
.no-margin { margin:0 !important;}
.big-col {
float:left;
width:100%;
margin-right:0%;
}
.small-col {
float:left;
width:48%;
margin-right:2;
}
.full-col {
float:left;
width:100%;
margin:0;
}
Change your css , jsFiddle
.videos {
width: 730px;
height: 400px;
float: left;
margin: 15px 5px 15px 0px;
}
.videos > div {
display: inline-block;
}
#big {
height: 200px;
width: 400px;
background-color: #fff0e0;
float:left;
margin-right:10px;
margin-bottom:10px;
}
#small {
height: 90px;
width: 195px;
background-color: #fff0e0;
margin-bottom:15px;
margin-right:10px;
float:left;
}
I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like http://jsfiddle.net/sirrocco/9z48t/ and http://jsfiddle.net/qcv5Q/1/..
This is the html code:
<div class="container">
<div id="spinner-icon" style="display:none">
<span class = "icon-spinner"></span>
</div>
<div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
<div class="clearfix">
<div class="pull-left">
<h4>{{cei.description}}</h4>
<p>{{cei.name}}</p>
</div>
</div>
<div class="log-widget-list">
<ul class="list scroller clearfix" id="elements-list">
<li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
<h4 class="align-center">{{tinfo.elementShortCode}}</h4>
<div class="clearfix">
<span class="icon-clock pull-left"></span>
<span class="pull-right"> {{tinfo.sentTime}}min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
and this is the css code:
.list {
margin: 0;
padding: 0;
}
.log-widget-list {
height:100px;
width: 720px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow-x: scroll;
list-style-type: none;
width: 1500px; /* combined width of all LI's */
}
#elements-list li {
width: 100px;
list-style: none;
box-sizing: border-box;
border-top: none!important;
background-color: #0accf8;
padding: 4px;
}
#elements-list li:not(:last-of-type) {
border-right: 3px solid #ffffff;
}
#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
margin-top: 4px;
font-size: 12px;
}
Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?
add overflow:hidden in #wrapper css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Demo: http://jsfiddle.net/lotusgodkk/9z48t/5/
DEMO
http://jsfiddle.net/FTUrF/6/
Changed some CSS here:
.log-widget-list {
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.log-widget-list .scroller {
width: 215px;
height: 300px;
overflow: scroll;
padding-bottom: 15px;
list-style-type: none;
}
Added height and padding-bottom in .scroller and border in .log-widget-list
and added some more of these:
<span class="pull-right"> {{tinfo.sentTime}}min</span>
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
I've created a parent div with four divs inside of it. The first div (grey)contains an image, the second (red) is to be below this div with a description. The two other divs are to float right of these two.
This is the closest I can get:
I want the 3rd/4th divs to sit flush up top. I could use a negative top-margin but I would like for it to naturally go up. Also, I cannot rearrange the order of the divs. It is a basic problem/misunderstanding but I can't give a clear enough definition for google.
Here is my html:
<div id="container">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
And here is the CSS:
#container {
width: 440px;
height: 212px;
border: 1px solid grey;
}
div {
border: 1px solid black;
display: block;
}
.imgbox {
width: 218px;
height: 100px;
float: left;
clear: none;
background-color: grey;
}
.pick {
width: 218px;
height: 100px;
}
.pick#first {
float: left;
clear: left;
background-color: red;
}
.pick#second {
float: left;
background-color: blue;
}
.pick#third {
float: right;
clear: right;
background-color: purple;
}
Simply wrap the two sides in a div with common CSS.
HTML:
<div id="container">
<div class="l">
<div class="imgbox">0</div>
<div class="pick" id="first">1</div>
</div>
<div class="l">
<div class="pick" id="second">2</div>
<div class="pick" id="third">3</div>
</div>
</div>
-
CSS:
#container {
width: 440px;
height: 212px;
border: 1px solid grey;
}
div {
border: 1px solid black;
display: block;
}
.l { width: 218px; float: left; }
.imgbox {
width: 218px;
height: 100px;
background-color: grey;
}
.pick {
width: 218px;
height: 100px;
}
.pick#first {
background-color: red;
}
.pick#second {
background-color: blue;
}
.pick#third {
background-color: purple;
}
Demo here
Put all your DIV's on the left side into a container div and float it to the left. Then put all your right side DIV's into a container and float it to the right.
You might have to specify the width of .left_side and .right_side too.
HTML:
<div id="container">
<div class="left_side">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div class="right_side">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
CSS:
#container {
width: 440px;
height: 212px;
border: 1px solid grey;
}
div {
border: 1px solid black;
display: block;
}
.left_side {
float:left;
}
.right_side {
float:right;
}
.imgbox {
width: 218px;
height: 100px;
float: left;
clear: left;
background-color: grey;
}
.pick {
width: 218px;
height: 100px;
}
.pick#first {
float: left;
clear: both;
background-color: red;
}
.pick#second {
float: left;
background-color: blue;
}
.pick#third {
float: right;
clear: right;
background-color: purple;
}
First, you need to wrap the divs you want on the left into one container, and the divs on the right in another:
<div id="container">
<div id="left">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div id="right">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
Then, you can remove the individual float assignments from each div and assign them instead to #right and #left:
#left {
float: left;
}
#right {
float: right;
}
Finally, you need to take the correct widths into account. Your #container has 440px of room. Each child div is assigned 218px; however, each of those divs also has a 1px border on each side, making them take up 218 + 2(1) = 220px of room. Reduce the width of #imgbox and .pick to 216px.
Everything together can be seen at this jsFiddle.
Create two sub-containers and float them.
<div id="container">
<div class="sub-container">
<div class="imgbox"></div>
<div class="pick" id="first"></div>
</div>
<div class="sub-container">
<div class="pick" id="second"></div>
<div class="pick" id="third"></div>
</div>
</div>
.sub-container{
margin: 0;
padding:0;
display: inline-block;
float: left;
}