CSS class orders shows different results - html

The bb class background colour would be red if I move the code before the intro-block class css codes , however if I put it after the intro-block class css codes the colour is not changing and nothing happens!
Could anyone tell me why this happens?!
.left-column {
width: 35%;
margin-left: 20px;
margin-right: 50px;
float: left;
overflow: hidden;
}
.right-column {
overflow: hidden;
}
.intro-block {
background-color: #22AAA1;
margin: 0 auto;
/*max-width: 950px;*/}
}
.bb {
background-color: red;
}
<body>
<header>
<section class="intro-block">
<div class="left-column">
<img class="profile-pic right-column" src="img/11.jpg">
</div>
<div class="right-column">
<h1>lorem ipsum</h1>
<p>
<h4>lorem ipsum</h4>
</p>
</div>
</section>
</header>
<main>
<section class="bb">
<h3>lorem ipsum</h3>
<div class="left-column">
<div>
<p>lorem ipsum</p>
</div>
</div>
<div class="right-column">
<h5>lorem ipsum</h5>
</div>


You have an extra } just before .bb {}
Note: don't wrap headings (h1 to h6) in p
You should indent/tidy your code for better reading and with that you will find this mistakes easily
.left-column {
width: 35%;
margin-left: 20px;
margin-right: 50px;
float: left;
overflow: hidden;
}
.right-column {
overflow: hidden;
}
.intro-block {
background-color: #22AAA1;
margin: 0 auto;
/*max-width: 950px;*/
}
.bb {
background-color: red;
}
<body>
<header>
<section class="intro-block">
<div class="left-column">
<img class="profile-pic right-column" src="img/11.jpg">
</div>
<div class="right-column">
<h1>lorem ipsum</h1>
<h4>lorem ipsum</h4>
</div>
</section>
</header>
<main>
<section class="bb">
<h3>lorem ipsum</h3>
<div class="left-column">
<div>
<p>lorem ipsum</p>
</div>
</div>
<div class="right-column">
<h5>lorem ipsum</h5>
</div>
</section>
</main>


/max-width: 950px;/}
you have an extra } after the quoted line that messes up with the following rules ...

Related

overflow scroll greyed and div not taking all the height

Its taking me hours without success.
Im trying to create a layout: Code example
html,
body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.MyNavbar {
height: 30px;
background-color: red;
}
.Main {
height: -webkit-calc(100% - 30px);
height: -moz-calc(100% - 30px);
height: calc(100% - 30px);
}
.Main:after {
content: "";
display: table;
clear: both;
}
.Sidebar {
height: 100%;
width: 10%;
float: left;
background-color: yellow;
}
.Content {
height: 90%;
width: 90%;
background-color: #e8e8e8;
float: left;
}
.ContentHeader {
height: 30px;
width: 100%;
background-color: blue;
}
.ContentData {
background-color: lightblue;
/*margin-top: 10px; */
height: calc(100% - 30px);
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<body>
<script src="src/index.js"></script>
<div style="height: 100vh;">
<div class="MyNavbar">myNavbar</div>
<div class="Main">
<div class="Sidebar">
Sidebar
</div>
<div class="Content">
<div class="ContentHeader">
ContentHeader
</div>
<div class="ContentData">
ContentData<br /><br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<p>Lorem Ipsum</p>
<br />
<h3>End of ContentData</h3>
</div>
</div>
</div>
</div>
</body>
</html>
The ContentData section should take all the space until the bottom of the display. If there is too much content, the scrollbar of that section should allow viewing the rest of the content.
But Im not able to:
- make the scroll bar work. It keeps greyed out.
- If there is no content (by removing the "Lorem Ipsums") content data does not take all the height i want to fill the display size.
Any help? Thanks!

You need to remove comment from following code.
.Content {
/*height: 90%;*/
width: 90%;
background-color: #e8e8e8;
float: left;
}
html,
body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.MyNavbar {
height: 30px;
background-color: red;
}
.Main {
height: -webkit-calc(100% - 30px);
height: -moz-calc(100% - 30px);
height: calc(100% - 30px);
}
.Main:after {
content: "";
display: table;
clear: both;
}
.Sidebar {
height: 100%;
width: 10%;
float: left;
background-color: yellow;
}
.Content {
height:100%;
width: 90%;
background-color: #e8e8e8;
float: left;
}
.ContentHeader {
height: 30px;
width: 100%;
background-color: blue;
}
.ContentData {
background-color: lightblue;
/*margin-top: 10px; */
height: calc(100% - 30px);
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<body>
<script src="src/index.js"></script>
<div style="height: 100vh;">
<div class="MyNavbar">myNavbar</div>
<div class="Main">
<div class="Sidebar">
Sidebar
</div>
<div class="Content">
<div class="ContentHeader">
ContentHeader
</div>
<div class="ContentData">
ContentData<br /><br />
<h3>End of ContentData</h3>
</div>
</div>
</div>
</div>
</body>
</html>

Problem using flex-wrap to break to the next row after the 5th element.

I've been working on an image gallery using flexbox with a flex-basis transition to grow and shrink the elements on hover. I am having a problem adapting the gallery to use flex-wrap to break to the next row after the 5th element.
The way I'm hoping for it to function is that each row has 5 elements that grow and shrink on the same row. After the a sixth element is placed in the container I want to break to the next row and have the elements continue functioning as expected (transitions included).
Elements stretch to fill available space (width of 20% for each of the 5 elements)
-> On hover, the other elements shrink 5% for a total of 20%
Hovered element grows to 40%
Sixth element that moves to next row inherits the size of the available space
Seventh element takes up 50% of row, eighth 33.3%...ect.
This is what I currently have: https://codepen.io/TommyBoyLab/pen/YdzGjB
(adapted from: https://codepen.io/joliveras/pen/GpLVKv)
HTML of element:
<div class="container">
<div class="item" style="background:url() center/cover">
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.container .item {
display: grid;
position: relative;
flex: 1;
transition: 500ms;
min-width: 15%;
max-width: 20%;
height: 50vh;
}
.container .item:hover {
transition: 500ms;
max-width: 40%;
flex-grow: 1;
}
.container .content {
margin: auto;
font-size: 1.5em;
}

It seems you only need to increase the value of flex-grow on hover:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.container .item {
display: grid;
position: relative;
flex: 1;
transition: 500ms;
min-width: 15%;
max-width: 20%;
height: 50vh;
}
.container .item:hover {
transition: 500ms;
max-width: 40%;
flex-grow: 5;
}
.container .content {
margin: auto;
font-size: 1.5em;
}
<div class="container">
<div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
<div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
<div class="content">
<h3>Title</h3>
<p>Lorem ipsum amet</p>
</div>
</div>
</div>

Addition to CSS:
.item:first-child:nth-last-child(n + 5),
.item:first-child:nth-last-child(n + 5) ~ *{
min-width: 17%;
}

width:auto not working right for absolutely positioned div when scroll bar is present

I have a div with some content that's absolutely positioned and has an explicit height. When the content goes outside the height, a scroll bar appears, but it doesn't respect my width:auto - the scroll bars cover up the content.
Example:
<style>
#main {
height: 100px;
border: 1px solid red;
overflow-y: auto;
position: absolute;
}
</style>
<div id='main'>
<div>test</div>
<div>test</div>
<div>testiiiiiiiing</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
What's going on here? Is this browser bug? How can I make it correctly respect my automatic width?

You can use overflow-y: scroll;
<style>
#main {
height: 100px;
border: 1px solid red;
overflow-y: auto;
position: absolute;
padding-right: 10px;
}
#a {}
</style>
CodePen

Two possiblties occur to me although it's unlikely you will find many words being 100px wide.
First, just add some padding-right to make space for the scrollbar.
.main {
height: 100px;
border: 1px solid red;
overflow-y: auto;
position: absolute;
padding-right: 25px;
}
<div class="main">
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit.</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Loremipsumdolorsitametconsecteturametconsectetur.</div>
<div class="a">Lorem</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit.</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="a">Lorem</div>
</div>
Secondly, force all words to break if they reach that far edge using word-wrap: break-word;
.main {
height: 100px;
border: 1px solid red;
overflow-y: auto;
position: absolute;
padding-right: 25px;
}
.main.breaking {
padding-right: none;
word-wrap: break-word;
}
<div class="main breaking">
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit.</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Loremipsumdolorsitametconsecteturametconsectet</div>
<div class="a">Lorem</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit.</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="a">Lorem</div>
</div>

Vertical align floated image + container (H+p)

I want to center an floated image and a container (paragraph + heading):
.row {
display: block;
/* width: 100%; */
}
.left {
float: left;
}
.right {
float: right;
}
<div class="row">
<div class="container">
<img class="right" src="" width="300" height="300" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
<div class="row">
<div class="container">
<img class="left" src="" width="300" height="156" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
Here is also a live version of the problem. I have cleared the floats but now I can't center the .img and .container element. What would you slove the problem?

You have no luck with floated elements since they don't obey vertical-align. You can instead use display: table-cell along with vertical-align: middle and that would work perfectly. Albeit you will need to modify your HTML structure a little bit to place the content first before the image and vice versa depending on the way you want the content and images to appear on the front-end.
.container {
display: table;
}
.content {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image img {
width: 100%;
}
<div class="row">
<div class="container">
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>

Basically what you can do to vertically align text is change the display of the container to table then the paragraph to table-cell and then set the vertical-align to middle looking like this:
.row {
display: table;
overflow: hidden;
}
.left, .right {
display: table-cell;
vertical-align: middle;
}
You might also need to set overflow to hidden on the container so that the height is maintained because of the floats.

Not sure how to make this happen.. 4 sections of text spread evenly across page?

I have 4 small bodies of text that I'd like to display evenly across the page.
Here's an image of what I have in mind:
Something tells me tables would be the best way to go, but a)I've always been told not to use them and b) because of that, I have no idea how to do so if that is in fact the best route to take.
I'm open to suggestions; any and all help is appreciated.

I believe something like this would work:
CSS:
html, body
{
width: 100%;
padding: 0px;
margin: 0px;
border: none;
}
div.content
{
float: left;
vertical-align: top;
margin: 0px;
padding: 0px;
width: 25%;
}
HTML:
<div class="content">Blah</div><div class="content">blah blah</div>
<div class="content">Blah Blah</div><div class="content">blah blah blah blah</div>
See this jsFiddle

Travis's is good, this version gives you a little more to work with, and will let you dial in the padding between the blocks. The background colors are just in there for you to see how it's working.
CSS:
.testimonials {
border:1px solid black;
}
.testimonial {
float:left;
width:25%;
background-color:#ccc;
}
.testimonial blockqoute {
display:block;
padding:20px;
background-color:yellow;
font-style:italic;
}
.testimonial attr {
display:block;
font-style:normal;
}
.clear {
clear:both;
}
HTML:
<div class="testimonials">
<h3>Client Testimonials</h3>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="clear"></div>
</div>

I would do something like this. Just replace the percentages with pixels if you don't want a liquid layout.
CSS:
* {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
#container {
width: 80%;
margin: 0px auto;
}
#container div {
width: 25%; /* 25% percent of the #container width */
padding: 10px;
float: left
}
HTML:
<div id="container">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div>Content 4</div>
</div>

HTML
<div id="content">
<h1>title</h1>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
CSS
'#content {width:100%; overflow:auto; padding:20px 0}<br />
.text_tontent {width:25%; float:left;}<br />
.text_tontent p {padding:0 10px;}<br />'