Alright so I'm trying to format all these different items to have the same color instead of having to change them all separately. I'm following all the examples I can find on the internet but for some reason it isn't working. Please no salt when answering my question either, I'm just trying to find some help on finding this error.
HTML:
<body>
<div id="header"></div>
<div id="links"></div>
<div id="main"></div>
<div id="pictures"></div>
<div id="footer"></div>
</body>
CSS:
body, #header, #links, #main, #pictures, #footer{
background-color:#cbebf6;
}
Style is ok, elements are empty - that's probably why you don't see the results.
Besides that you should use classes for common styles instead of ids
I'm guessing you mean you want to have a unique css selector for all elements. For that you should use a class
CSS:
.red{
background-color:#cbebf6;
}
HTML:
<body>
<div id="header" class="red"></div>
<div id="links" class="red"></div>
<div id="main" class="red"></div>
<div id="pictures" class="red"></div>
<div id="footer" class="red"></div>
</body>
Do as Drew Kennedy Suggested. Apply the same class to all of them.
.bg-color {
border: solid 1px black;
background-color: #cbebf6;;
}
#header, #links, #main, #pictures, #footer { /* Just for outline sake */
width: 200px;
height: 200px;
margin: 10px;
}
<body class="bg-color">
<div id="header" class="bg-color"></div>
<div id="links" class="bg-color"></div>
<div id="main" class="bg-color"></div>
<div id="pictures" class="bg-color"></div>
<div id="footer" class="bg-color"></div>
</body>
Related
Hello – I would like to show content in a div based on the content in another div. For example, if sibling1 is empty, I would like to hide sibling2 (in parent1 below). If sibling1 has content, I would like to show sibling2 (parent2 below). I'd prefer to be able to do this with CSS, is this possible? If not, I can work with a simple javascript suggestion as well.
<!---hide sibling2--->
<div class="parent1">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent2">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
.parent {
height: 100px;
border: 1px solid;
}
.sibling1 { background: green; }
.sibling2 { background: red; }
.sibling1:empty + .sibling2 { display: none; }
<!---hide sibling2--->
<div class="parent">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
I have a class .entry-content that has 30px of margin on every page, and I have a class .double-outter-wrapper that is the first-child, but is only on 1 or 2 pages. Is there a way to target only the pages that have .entry-content and .double-outter-wrapper to change the margin to 0?
JavaScript may be a viable solution if you're willing to use it... if you include a common JavaScript GUI controller in each of your pages you can definitely handle this... it's as simple as...
if (document.getElementsByClassName('your-conditional-element').length !== 0) {
document.getElementsByClassName('your-element')[0].style.margin = 0;
}
With Jquery want to achieve the same. So here class one has a background color red. And in the two cases, it has a class two. So selecting the class two and checking for its parent one and changing its CSS to green. You can add CSS as per your need like margin:0
Here is an example
$(".two").parent(".one").css("background","green");
.one {
background:red;
width:90%;
height:20%;
margin:30px;
padding:20px;
}
.two {
background:blue;
width:100%;
height:100%;
}
.three {
background:orange;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<div class="two three">
class 1
</div>
<div class="three">
</div>
</div>
<div class="one">
<div class="two three">
</div>
<div class="three">
</div>
</div>
<div class="one">
<div class="three">
</div>
</div>
<div class="one">
<div class="three">
</div>
</div>
In the following SO question (Gutter between divs), I got a great answer from Paweł Janicki. That was almost 4 months ago and I just revisited the code where I used it, and realized that in IE 11, when you resize the window, it doesn't stay on one line, it seem while! resizing the IE window, it goes from one line, and then wraps, goes back to one line, and then wraps.....
Here are two pictures of how it looks. In the first picture it looks perfect, then I minimize the window and it breaks:
https://i.imgur.com/ueEPzJc.png
https://i.imgur.com/pXP9leB.png
and here is the codepen with the sample:
https://codepen.io/anon/pen/xgZMwq
I would be ever so grateful if someone could help me fix this behavior in IE as it works as I want it in FF and Chrome.
thanks in advance!
Below is the final code I got from the old SO question:
.container{
font-size: 0;
}
[class|="col"] {
display:inline-block;
vertical-align: top;
position:relative;
font-size:20px;
}
.col-1-3{
width:calc(100%/(3/1));
}
.col-2-3{
width:calc(100%/(3/2));
}
.col-1{
width:100%;
}
.children-has-gutters{
margin-left:-15px;
margin-right:-15px;
width: calc((100% / (3/1)) + 30px);
}
.children-has-gutters > div{
padding-left:15px;
padding-right:15px;
box-sizing: border-box;
}
.bg-blue{
background-color:#42a5f5;
color:#ffffff;
}
.bg-green{
background-color:#66bb6a;
color:#ffffff;
}
<div class="container">
<div class="col-1-3 bg-blue">blue left</div>
<div class="col-1-3 children-has-gutters" style="font-size:0px;">
<div class="col-1-3">
<div class="bg-green">green 1</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 2</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 3</div>
</div>
</div>
<div class="col-1-3 bg-blue">blue right</div>
</div>
Try flex solution
.container{
display:flex;
}
.col-1-3{
flex:1;
}
.container{
font-size: 0;
}
[class|="col"] {
display:inline-block;
vertical-align: top;
position:relative;
font-size:20px;
}
.container{
display:flex;
}
.col-1-3{
flex:1;
}
.col-2-3{
}
.col-1{
width:100%;
}
.children-has-gutters{
margin-left:-15px;
margin-right:-15px;
}
.children-has-gutters > div{
padding-left:15px;
padding-right:15px;
box-sizing: border-box;
}
.bg-blue{
background-color:#42a5f5;
color:#ffffff;
}
.bg-green{
background-color:#66bb6a;
color:#ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="col-1-3 bg-blue">blue left</div>
<div class="col-1-3 children-has-gutters" style="font-size:0px;">
<div class="col-1-3">
<div class="bg-green">green 1</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 2</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 3</div>
</div>
</div>
<div class="col-1-3 bg-blue">blue right</div>
</div>
in the unlikely even that someone else stumble on this same problem, the answer is:
This line of code, has two calculations, first the percentage and then the addition of px:
width: calc((100% / (3/1)) + 30px);
IE 11 seem not to be able to handle it, and gets it wrong when! you resize the browser, the answer is to calculate the percentage yourself, like this:
width: calc(33.333% + 30px);
Thats it, flickering gone.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Having a discussion with a co-worker on what is best practice with CSS clear / overflow. Please shut one of us up and explain why one is better than the other.
JOEL'S CODE (using overflow):
<style>
.container { overflow: hidden; }
.one, .two { float: left; width: 50px; height: 50px; background-color: red; }
</style>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
CHRIS' CODE (using clear):
<style>
.clear { clear: both; }
.one, .two { float: left; width: 50px; height: 50px; background-color: red; }
</style>
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
Both make this image:
Who is right? :)
If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don't typically work out that way and we need to have more float-clearing tools in our toolbox.
http://css-tricks.com/all-about-floats/
overflow:hidden is best used when you have a container which is smaller than the content inside; whereas clear:both is best used when you want a floating container to NOT position itself alongside the nearest container.
looking at your red squres example, you would want to use clear rather than overflow, but not as its done here. perhaps something more like:
.container { width:110px; clear:both; }
.one, .two { float: left; width: 50px; height: 50px; margin-right:10px; background-color: red; }
basically you are both wrong and right. Joel uses the better html approach, but Chris is using the right bit of CSS code, just in the wrong way.
Here is a compromise:
DEMO jsBin
CSS:
.container { display:table; }
.one, .two { float: left; width: 50px; height: 50px; background-color: red; margin:1px;}
HTML:
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
I'd write it this way. CHRIS's code is something i'd not write but just cause of the redundant empty DIVs.
Since the CSS in both cases is about the same in terms of complexity and maintainability, the solution with simpler (and hence, smaller) HTML and overall payload wins. It isn't a big difference, and with compression, the repeated code will likely disappear, but simpler and smaller is always better if all else is equal.
What about the micro clearfix? No added markup, no overflow: hidden; clipping, cross browser support for IE 6+.
My personal preference is the overflow:hidden technique. I think this is because floating something is a style decision. To place a class of clear in the markup seems to me like adding style information into the data layer. It's similar (but nowhere near as bad) as adding inline css. (Infact, if you think about it, you might as well add style="clear:both" to the div you wish to add class="clear" to).
This is of course my personal opinion. I don't claim one is better than the other. But I have very rarely encountered a problem with overflow:hidden.
I got a little problem and nothing I test seems to work.
My HTML:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
CSS:
#top_parent {
background:#f00;
height:100px;
}
#top{
background:#0f0;
float:right;
position:relative;
height:100px;
width:50%;
}
#content{
top:-50px;
background:#00f;
<!-- position:relative;-->
height:100px;
width:80%;
margin:auto;
}
#parent{
background:#000;
height:350px;
width:100%;
}
#bottom {
height: 50px;
background:#ff0;
bottom:0px;
<!--position:absolute; -->
<!--position:relative; -->
}
Now my problem is, the footer won't get under the parent div, it stays in the content area. What am I doing wrong?
jsF link: my source
Thanks for the help.
You have not closed this div:
<div id="content">Here comes random stuff<div>
Should be:
<div id="content">Here comes random stuff</div>
You could see this easily if you indented your divs:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff<div> <!-- Can see the problem -->
</div>
<div id="bottom">Footer</div>
Not sure if you copy-pasted or if this is a typo when you posted your code, but this line:
<div id="content">Here comes random stuff<div>
Should have a closing </div> tag at the end instead of that opening <div> tag. If that's actually your HTML, then it would not be grouping the divs the way you want/expect.
I think you have a wrong html:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
You didn't close div parent, nor content
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
<div id="bottom">Footer</div>
</div>
Interpreting that you want the "bottom" div inside the "parent", else:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
</div>
<div id="bottom">Footer</div>
Also, in your css you should enable the position:relative for #content div, else the top parameter won't work.
Try if this solves the problem.
In order to position footer after the content divs you have to float content divs first and then add clear:both css command to the footer. So your tree sould look like this:::
<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>
For this example your css should be as following:::
div.wrapper{
width:80%;
position:relative;
margin:0 auto;
}
div.left{
float:left;
width:60%;
background:green;
height:200px; /height only for testing so you could see the result/
}
div.right{
float:right;
width:30%;
background:red;
height:200px; /height only for testing so you could see the result/
}
div.footer{
clear:both;
height:40px;/height only for testing so you could see the result/
background:yellow;
width:100%;
}
Have you tried taking out that "bottom" attribute in the #bottom rule?