I have two divs inside of a parent div, but when I inspect the page, the two divs are not in a container, even though I have wrapped the div around the other 2 divs.
I want to add characteristics to the parent div, instead each div individually.
Advice?
<!DOCTYPE html>
<head>
<title>Lavu Explore</title>
<link rel="stylesheet" type="text/css" href="styles_sample.css">
</head>
<body>
<div id="sell_section">
<h2>Sell, Manage, & Market in one easy system</h2>
<hr class="hr_1">
<div class="box1">
<img id ="terminal_img" src="http://i.imgur.com/D5T6lY1.png">
</div>
<div class="box1">
<p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
</div>
</div>
</body>
</html>
styles_sample.css
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: auto;
position: relative;
overflow: auto;
padding: 0 5%;
max-width: 990px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h2 {
text-align: center;
font-family: DIN;
font-size: 40px;
color: #8b8b8b;
text-align: center;
width: 100%;
font-weight: normal;
}
p {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #8b8b8b;
font-size: 16px;
line-height: 150%;
}
.hr_1 {
position: relative;
padding: 0;
margin: 2% auto;
height: 0;
width: 400px;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aecd37;
border-bottom: 1px solid #aecd37;
}
.box1 {
width: 50%;
min-width: 50%;
position: relative;
min-height: 1px;
}
#media (min-width: 830px) {
.box1 {
float: left;
}
}
#media (max-width: 830px) {
.box1 {
width: 100%;
}
}
You didn't insert html start tag after your doctype, it should look a little like this
<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
+1 on Johnny's answer, and also markup is slightly out of whack:
You style have style rules added to .hr_1 element, while it appears you would want to have them added to #sell_section - that's the id of the wrapping div.
I'm having a little trouble understanding exactly what you are after. The way I understand it you might want to do something like add a border or background-color to your #sell_section DIV. And at different sizes the styles are not being applied like you would like them to? If so, then the culprit is because you are floating your child/nested DIVs. Floating can be a bit tricky to understand at first. It is definitely one of those concepts that takes a bit of practice and knowledge to understand fully.
Here's the short of what happens when you float something:
When an element is floated it is taken out of the normal flow of the
document.
What does that mean? If you have this structure:
<div class="outer">
<div class="inner">inner</div>
<div class="inner">inner</div>
</div>
and the following CSS:
.outer {
background-color: red;
}
.inner {
float: left;
width: 50%;
}
the background color of .outer would not be visible because the child DIVs are floated and do not take up any space within their parent DIV. Although other elements within the parent DIV (floated or not) with them.
The solution? The most popular is know as clearfix. Apply that to the element that contains floated elements and it will behave as if those elements were not floated and took up space.
I found the answer to my problem! I didn't realize that floated elements do not take up space in a div. So to correct it, I added overflow:auto to my containers. This solved the problem completely. Now I can add borders and backgrounds to my divs without wondering why they aren't stretching the length of the whole container.
Related
This is my first question on stackoverflow, so please bear with me if I don't do everything correct. If I can format this better, please let me know.
I am working through the TOP 2nd CSS Margin/Padding exercises. I was able to get through the first one no problem, but I have a situation that I don't understand in the second task.
The goal was to manipulate the padding/margins to achieve a certain desired outcome. Below is the original HTML and the CSS original, followed by the solution. I've put a link to the .png of desired outcome at the bottom.
My question is specifically about the .card and .title elements.
Before the 8px padding was added to the .card element, the edge of the blue background inside the .title element when right up to the top edge of the box and were flush with the .card element. When I add 8px padding to the .card element, it seems to add it correctly to the left, right and bottom of everything, however the top of the .title element seems almost double in white space between the top of the blue box in the .title element and the top of the .card element.
This is fixed then by adding the margin-top: 0; in the .title element.
I'm having a very hard time conceptualizing why I need to add the margin-top of 0. I think I understand everything else. But why is everything flush without the padding, but when I add the 8px padding, it looks good on all sides except the top which appears double, necessitating the margin-top: 0; being inserted into the .title element
Does it have anything to do with an h1 margin having some extra margin to begin with? Again, this is my first run at CSS so I'm not sure if that is correct. If it does have something to do with the h1 margin, why am I only seeing it when I add the padding?
Perhaps I'm missing a super easy concept here, but it's doing my head in so any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
CSS Original + Solution
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
The reason for the phenomenon you're observing is a CSS "feature" called collapsing margins, which has been giving developers headaches for literally decades.
Let me show you a very simplified example of how it works.
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
}
<div class="outer">
<div class="inner"></div>
</div>
So this does what we're expecting it to do: It shows the orange div.inner right inside the green div.outer, at the very top of div.outer.
So what if we want to move the div.inner like let's say 20px down inside div.outer?
Let's try what seems intuitive: .inner { margin-top: 20px; }
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
Now instead of moving down div.inner inside div.outer, the whole div.outer has moved, with the div.inner still at the very same position relative to div.outer.
Huh???
This is where collapsing margins kick in. In certain conditions, if a parent with a margin-top (0 by default for div) has a child that has a margin-top (like in your code the h1 has), both margins collapse, meaning whichever element has the greater margin is applied to the parent element, not the child.
This only applies as long as the parent element has no padding-top set. Simply setting that to 1px stops margins from collapsing:
.outer {
background-color: green;
height: 250px;
/* stops collapsing margins: */
padding-top: 1px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
What is going on is described at MDN for three different basic cases, this one applying here:
No content separating parent and descendants
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
You are correct, h1 has an inherent margin associated with it. I believe in chrome it is 0.67em. You can demonstrate this property by simply changing the h1 in <h1 class="title">I'm a card</h1> to a div and you can see how there's no margin anymore when you apply this.
Below in this example all I did was remove the margin-top: 0; from .title and switched h1 to divand you can see there no margin anymore
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<div class="title">I'm a card</div>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
You're absolutely right about the margin on the h1 tag. Browsers add default styling to most HTML elements. It varies slightly between browsers, but in Chrome by default an h1 tag has about 0.67em of margin above and beneath it.
These default stylings are included to aid legibility of HTML documents that don't have any CSS applied – but they can all be overridden.
A really handy feature to take advantage of when you're writing CSS is your browser's 'Inspect element' feature: If you right click on your h1 tag in your browser and click 'Inspect element` in the menu that appears, you can see both the styling you've applied and the browser's default styling, referred to as the 'user agent stylesheet.'
If you hover over an element you can see how its padding and margin are affecting its layout.
You can see Chrome by default adds a margin-block-start and margin-block-end to the h1 tag by default. It's worth asking why it doesn't just use margin-top and margin-bottom, but the margin-block property covers off text that isn't oriented from left to right, or is rotated. Either way, setting your own margin-top and margin-bottom will override it, as you've done.
#connexo has described the collapsing margins phenomenon, which of course adds even more to ponder. This Medium article provides a little more context on why it occurs, using paragraphs as an example.
I'm struggling with a problem which seems simple:
My code:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
width: 100%;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The box contained in the wrapper has a fixed size, which might overflow the wrapper on small screens. Why doesn't the wrapper wrap around the box? How would I do that?
You can also check out the issue in this jsFiddle.
In order to make this work:
Remove width: 100% and add to the wrapper display: inline-block.
Doing so, will enable the wrapper to have as much width as needed to wrap around the box. Putting width: 100% restricts your wrapper to the width of the screen and in case of the box having a bigger with than that of the screen, it won't work.
If you do not want to have a horizontal scrollbar, especially on narrower screens use: box-sizing: border-box on the wrapper.
CSS:
.wrapper {
display: inline-block; /* Ensures that the box stays wrapped */
padding: 10px;
background: white;
box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */
}
Here is a working version of your jsFiddle, with both the wrapping issue mended and the horizontal scrollbar abolished.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
box-sizing: border-box display: inline-block;
padding: 10px;
background: white;
}
.box {
position: relative;
margin-top: 40px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
For reference:
display: inline-block;
box-sizing: border-box;
Use display:inline-block on the wrapper to resize the container based on the content inside.
The div element by default has display:block; so you need to change its display.
You should remove width:100%; from .wrapper class, then you can make it display:inline-block; or display:table;
*{
font-family:tahoma;
}
body{
background:#333;
}
.wrapper
{
padding:10px;
background:white;
display:inline-block;
}
.box
{
margin-top:40px;
width:1100px;
height:400px;
background:#aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
Your problem occurs, because HTML documents, by default, display all elements as display: block.
There are two ways to do it as our friends have mentioned before.
First one is to use inline-block value for the display property:
body{
display: inline-block;
}
The second way is to use max-width:
div.wrapper{
max-width: 100%;
/*we have set height property to auto to have coefficient between width & height*/
height: auto;
}
For more information visit these webpages:
inline-block
max-width
You can solve the problem by using the following css:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
display: inline-block;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The only change is I have added display: inline-block to .wrapper element.
Why wrapper doesn't wrap around the child div
The problem is all html element has some default CSS styling which gets applied by the browser.
In this case div gets a default property of display: block; It is the same property that makes a default unstyled div to take up full available width of it's parent element.
As you can see with this: snapshot of chrome dev tools
*The css style highlighted in red rectangle is the default styling applied by the browser.
*The red underlined text tells us about the width of the element. The fading out signifies that value of that property is computed by the browser.
** While we are at it I want to point you to a different problem that you might have faced with the previous code and if the goal was to make the wrapper to wrap box at all times.
If the .box div would have width far less than that of the width of the browser then another problem may arise which I have shown in the code snippet bellow.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
}
.box {
margin-top: 40px;
width: 100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
As you can see the box tries to cling to a side of wrapper.
You can read more about display css property here: CSS display property || CSS-Tricks
Firstly, I wanted to thank all of the great folks here who helped me solve a ton of issues with my basic layout, syntax, and the like. I think I have cleaned up my syntax and the development of my CSS as well as HTML are coming along quite nicely now.
Now, on to the issues at hand. There are two that I'm working through now:
There is spacing between the top navigation area, and the image in the next div. This only shows up at certain zoom levels, but I need to make sure it doesn't ever show up. I have tried eliminating the white space, and have made sure that all borders/padding are gone from this classes. The one thing I haven't tried is negative margins on the bottom of the Nav divs, but I would really like to do this without 'hacking' it with negative margins.
BONUS: Why can I not get the topImage class (which holds the .png file under the nav) to be an actual 100% width? I have tweaked it a bunch, but I keep ending up with padding on the sides. It's not the end of the world, but I would like it to be 100% just so it flows with the top elements, and also looks a little cleaner when it connects up to .bodySection2 and the .section divs that are the orange boxes.
This one is kind of annoying. I have a class, .section, which is the orange blocks on the page. These are all the same, programatically and I did a bunch of fiddling with the width and spacing to get them perfectly centered within the .bodySection2 div, so that I'm happy with. However, as you can see in the screenshot below, each of the boxes is a different size, even though they've been given the same Height % from the CSS. I realize that if I filled it out with text, they would adjust to be the same size, but I want to make sure they are the same size, regardless of the content inside of them. I have tried the Height: XX% (as well as making sure all parents have a % height set), but it does not seem to have any effect at all. Can you guys guide me on this one?
Fiddle HEre: Fiddle Here
Also - Any suggestions, advice, thoughts, comments, etc etc on the layout, color scheme, navigation elements, or whatever, would be greatly appreciated! I am in the midst of re-branding my company, and obviously, the web site is one of the biggest things to promote my brand.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Frick Solutions - Technology Consulting for Small Business</title>
<meta name="keywords" content="HTML,CSS"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="/redesign/css/fricksolutions.css"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
<div class ="container">
<div class="navLogo">
<img src="/redesign/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO;">
<div class="navElements" align="right">
<li> Why Us?</li>
<li> Small Business</li>
<li> Servers </li>
<li> #Home </li>
<li> Contact </li>
</div> <!--Close navElememts div -->
</div> <!--Close navlogo div -->
<div class = "bodySection">
<div class = "topImage">
<img src ="/redesign/img/NoteBookCoffeeforWeb2.png" style="width: 100%; height:auto; display:block;" alt="Let's Get to Work!">
</div> <!--Close TopImage div>\-->
</div><div class = "bodySection2"> <!-- close bodySection -->
<center>
<div class = "section" style="height:50%;">
<img src="/redesign/img/target.png"><br>
<b>A Targeted Approach</b><br>
Frick Solutions takes a targeted approach to solving your business problems through creative use of technologies.
</div><!-- Close leftSection -->
<div class = "section" style="height:50%;">
<img src="/redesign/img/arrow.png"><br>
<b>Guidance</b><br>
Providing guidance to small businesses on hot to get the best return on their technology investment and plan for the future.
</div> <!-- Close midSection -->
<div class = "section" style="height:50%;">
<img src="/redesign/img/speechbub.png"><br>
<b>Training</b><br>
Training for all of your staff on various technologies.</div>
</center>
<!-- Close rightSection -->
<!-- <div class = "section">
left text test
</div><!-- Close leftSection -->
<!--<div class = "section">
mid text test
</div> <!-- Close midSection -->
<!--<div class = "section">
right text test
</div><!-- Close rightSection -->
</center>
</div> <!--close bodySection2 -->
</div> <!-- close container -->
</body>
</html>
CSS:
body {
color: black;
font-family: "Roboto", sans-serif;
background-color: white;
margin: 0; /*use this to ensure left most content goes all the way to border of page */
width: 100%;
height: 100%;
}
html {
height: 100%; }
#media screen and (min-width:30em) { /* used to be 600 px */
.navLogo
{
padding-left: 1%;
padding-right: 1%;
position: fixed;
background-color: #373737;
width: 98%;
height: 10%;
/* border: 1px solid green; */
}
.navElements
{
padding-right: 1%;
padding-left: 1%;
font-family: "Roboto", sans-serif;
background-color: transparent;
position: absolute;
bottom: 0px;
width: 95%;
padding-bottom: .25%;
/* border: 1px solid orange; */
}
.navElements li
{
color: white;
background-color:transparent;
display: inline-block;
padding: 5px 10px 0 0;
}
a:link
{
color: white
}
a:visited
{
color: white
}
a:hover
{
color: grey;
}
.bodySection /* This is used to contain the image directly under the navigation/logo*/
{
padding-left: 1%;
padding-right: 1%;
padding-top: 5%; /*this is here as a hack to make sure the bodySection div shows up under the navLogo/navElement divs*/
width: 98%;
height: 100%;
overflow: auto; /*forces all content inside the div to appear within the div */
background-color: black;
display: block;
/* border: 1px solid red; */
}
.bodySection2 /*This holds the content under the images (boxes with images and text) */
{
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
width: 98%;
height: 100%;
overflow: auto; /*forces all content inside the div to appear within the div */
background-color: white;
display: block;
/* border: 1px solid red; */
}
.topImage
{
clear:left;
width: 100%;
display: block;
background-color: black;
overflow: auto;
/*border: 1px solid pink; */
}
.section
{
width: 22%;
height: 90%;
border: 4px solid;
border-color: #FFB238;
margin-left: 5%;
margin-right: 2%;
float:left;
padding-left: 1%;
padding-right: 1%;
margin-top: 1%;
padding-top: 1%;
padding-bottom: 1%;
margin-bottom: 1%;
/*overflow: auto; */
}
.container
{
width: 100%;
/*overflow: auto; */
background-color: black;
/*border: 1px solid blue; */
}
} /*closes # mediaedia screen and (min-width:30em */
User's Dorvalla and user112344 had the right idea. The only missing fix was the black space at the top of .bodySection. What was causing this issue was that padding-top: 5% (from .bodySection) and height: 10% (from .navLogo) are two very different things. The height in .navLogo is based of the the viewport, since .navLogo is a fixed element. On the other hand .bodySection's padding-top when used as a percentage is based on the width of the element. This is by design. According to the box-model spec:
<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
An easy way around this (for your case) is to use viewport units instead (don't worry, they are liquid). This coupled with removing your padding-left: 1% and padding-right: 1% from .bodySection fixes the other issue with your .topImage (technically you can remove your side padding on .bodySection2 as well).
For your .section height using flexbox works great to get them to be the same height. Just add display: flex and justify-content: space-around to .bodySection2 and remove your height on .section and they will happily comply to your wishes. Just make sure you don't forget the prefixes (-webkit- for Safari and -ms- for IE9).
* {
/* A quick css reset */
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
}
#media screen and (min-width:30em) {
.navLogo {
padding-left: 1%;
padding-right: 1%;
position: fixed;
background-color: #373737;
width: 98%;
height: 10%;
}
.navElements {
padding: 0 1%;
position: absolute;
bottom: 0;
right: 0;
padding-bottom: .25%;
}
.navElements li {
color: white;
display: inline-block;
margin-right: 10px;
}
a:link, a:visited {
color: white
}
a:hover {
color: grey;
}
.bodySection
{
/* Makes the padding equal to .navLogo's height */
padding-top: 10vh;
/* Removed padding-left and padding-right */
}
.bodySection2
{
margin: 2% 0;
/* Makes the .section's height match */
display: flex;
justify-content: space-around;
}
.section {
/* Removed height: 90% */
width: 22%;
border: 4px solid #FFB238;
padding: 1%;
text-align: center;
}
}
<body>
<div class="container">
<div class="navLogo">
<img src="http://www.fricksolutions.com/redesign/img/FrickSolutionsLogoWhite.png" style="height:100%;">
<div class="navElements">
<li>Why Us?</li>
<li>Small Business</li>
<li> Servers </li>
<li> #Home </li>
<li>Contact</li>
</div>
</div>
<div class="bodySection">
<div class="topImage">
<img src="http://www.fricksolutions.com/redesign/img/NoteBookCoffeeforWeb2.png" style="width: 100%;" alt="Let's Get to Work!">
</div>
</div>
<div class="bodySection2">
<div class="section">
<img src="http://www.fricksolutions.com/redesign/img/target.png">
<br>
<b>A Targeted Approach</b>
<br> Frick Solutions takes a targeted approach to solving your business problems through creative use of technologies.
</div>
<div class="section">
<img src="http://www.fricksolutions.com/redesign/img/arrow.png">
<br>
<b>Guidance</b>
<br> Providing guidance to small businesses on hot to get the best return on their technology investment and plan for the future.
</div>
<div class="section">
<img src="http://www.fricksolutions.com/redesign/img/speechbub.png">
<br>
<b>Training</b>
<br> Training for all of your staff on various technologies.</div>
</div>
</div>
</body>
EDIT
In order to fix the squishing of the logo (which oddly only happens in Chrome—and Opera, but no on really uses Opera) you can use object-fit: contain and object-position: 0 0. These allow background-image like behavior, but don't use background image. Chris Coyier at css-tricks.com has a nice, short, and sweet article for both object-fit and object-position. All it takes is one added rule to your css:
#logo img {
object-fit: contain;
object-position: 0 0;
}
While support for these two properties aren't all that great, since they are fully supported by both Chrome and Opera (the only two that need them to fix the issue) it isn't that big of a deal.
I took a moment to remove some of your css that was not doing anything. If you were attached to it in any way feel free to add it back in. Any properties that could be combined, along with any deprecated code (center and align="right"), were also modified.
Also a few suggestions. It's typically a good idea to avoid inline styling. You may want to think about moving the few inline styles you have left (I removed a lot that weren't doing anything in the quick clean up I did).
In addition to inline styles you may want to look at the semantics of your html. For instance, your .section's are a prime candidate for some simple modifications.
This:
<div class="section">
<img src="http://www.fricksolutions.com/redesign/img/speechbub.png">
<br>
<b>Training</b>
<br> Training for all of your staff on various technologies.
</div>
Could easily be changed to this:
<section>
<img src="http://www.fricksolutions.com/redesign/img/speechbub.png">
<h3>Training</h3>
<p>Training for all of your staff on various technologies.</p>
</section>
Simply change your css to reflect the changes (remove the '.' in front of .section and make the h3 tag match your font-size) and you won't even be able to tell the difference, but your html now has meaning (and break tags shouldn't be used for positioning). There of course could be an argument made against using a heading tag (which do you use? An h1? An h6? Something in between?) since there are no other used in your site. Technically HTML5 doesn't care though it's "strongly encouraged to use headings of the appropriate rank ...." If that bothers you you can just use a p tag and use either strong or b inside, similar to what you are doing now.
Another simple semantic fix would be to change .navLogo, '.navElements', and .topImage can all be changed from div's to header, nav, and figure respectively. Also, .container can be completely removed. All of this affects the look of your site in no way, but adds even more meaning to your html while removing a pointless element (if container is there for an unseen reason then I apologize).
If you really want to try something crazy you could get rid of .bodySection and .bodySection2 and instead wrap .topImage and the .section's (or section's if you change them) in a main tag. Just add the css rules from .bodySection and .bodySection2 with the addition of flex-wrap: wrap to main, add back the width: 100% to .topImage and move the margin: 2% 0 from .bodySection2 to your .section's. This removes two non-meaningful tags and adds one semantic one. Not a big change, but it cleans it up a bit.
HTML:
<main>
<figure class="topImage">...</figure>
<section>...</section>
<section>...</section>
<section>...</section>
</main>
CSS:
main {
padding-top: 10vh;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.topImage {
width: 100%;
}
.section {
margin: 2% 0;
...
}
Just a few ideas. There's absolutely no need to do any of that.
You may consider using a CSS reset at the beginning of your style file for unwanted spaces like this:
html, body, div, img, p, ul, li, span { margin: 0; padding: 0 }
I'm experimenting with using line-height to vertically align text inside of containing div. I find it strange that to do so using a percentage requires the use of (comparatively) astronomically large values. As you can see in this fiddle, I used 700% to push the text all the way down to the bottom margin of the containing div!
Any explanations? I'm curious to know what basis is used to calculate this percentage. Is there any danger that using something like this will break my page?
<!DOCTYPE html>
<html>
<head>
<style>
h1.enormous{
line-height: 700%;
font-size: 2em;
}
</style>
</head>
<body>
<div style="background-color:red; width: 300px; height: 125px;">
<h1 class="enormous">VOCÊ APRENDE</h1>
</div>
</body>
</html>
line-height as a percentage (e.g., 700%) or a constant (e.g., 7) is calculated on the basis of the font-size. Thus, the following declaration font: 12px/2 Sans-Serif will make text size 12 pixels in a line that is 24 pixels (2 * 12).
For your example, to place the text at the bottom of the container, using line-height property, you can do the following: http://jsfiddle.net/07r139tz/.
HTML:
<div class="container">
<h1 class="enormous">VOCÊ APRENDE</h1>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 10px;
}
h1.enormous {
font: 2em/1 Sans-Serif;
display: inline-block;
vertical-align: bottom;
}
.container {
background-color:red;
width: 300px;
height: 125px;
line-height: 125px;
}
h1.enormous{font-size: 2em; line-height: 20px; padding-top: 30%;}
.container{background-color:red; width: 300px; height: 125px;}
That should do it for ya.
I'm very new to this. Trying to create an HTML page with a simple 2 column layout. Both columns are divs inside a container div. One column is floated left, and the other is floated right. Since one column has a background color, it is important that the two divs are the same height. I've accomplished this by setting the html, body, container div, and each floated div's height to 100%. Works fine. But the one paragraph in the content (floated right div) is pretty big, and it overflows out of the div. This leads to this section at the bottom of the page where the div with the background color has no background color. I'm aware of the css overflow property, but I don't want it to overflow, I'd like the div to just be as big as the content within it. Better way to do this? Any other tips not related to teh question are also welcome. When I see all these unexpected bugs pop up, I still feel very much the beginner. Thanks, this is my first post:)
The content is just copied and pasted from allmusic.com so I had something to work with.
Here's the code:
/*General
******************************************************************/
html,
body,
#container {
height: 100%;
}
body {
font-family: "Noto Sans", sans-serif;
margin: 0;
}
div {
box-sizing: border-box;
}
#container {
clear: both;
}
p {
text-indent: 50px;
}
.col {
padding: 40px;
height: 100%;
}
/*Nav
******************************************************************/
.nav {
float: left;
width: 20%;
background-color: #e6e6e6;
}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
font-size: inherit;
}
/*Content
******************************************************************/
.content {
float: right;
width: 80%;
}
.content h2, .content h3 {
text-align: right;
}
.albumCover {
display: block;
border-radius: 50%;
width: 40%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen"/>-->
<link rel="stylesheet" type="text/css" href="musics.css" media="screen"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Dosis:400,700|Noto+Sans|Roboto+Condensed|Raleway|Titillium+Web' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div class="col nav">
<h3>Years</h3>
<ul>
<li>1973 Quadrophenia</li>
<li>1971 Who's Next</li>
<li>1969 Tommy</li>
</ul>
</div>
<div class="col content">
<h2>Tommy</h2>
<h3>The Who</h3>
<!-- <hr>-->
<img class="albumCover" alt="Ray Davies Storyteller Album Cover" src="pics/twt.jpg">
<p>The full-blown rock opera about a deaf, dumb, and blind boy that launched the band to international superstardom, written almost entirely by Pete Townshend. Hailed as a breakthrough upon its release, its critical standing has diminished somewhat in the ensuing decades because of the occasional pretensions of the concept and because of the insubstantial nature of some of the songs that functioned as little more than devices to advance the rather sketchy plot. Nonetheless, the double album has many excellent songs, including "I'm Free," "Pinball Wizard," "Sensation," "Christmas," "We're Not Gonna Take It," and the dramatic ten-minute instrumental "Underture." Though the album was slightly flawed, Townshend's ability to construct a lengthy conceptual narrative brought new possibilities to rock music. Despite the complexity of the project, he and the Who never lost sight of solid pop melodies, harmonies, and forceful instrumentation, imbuing the material with a suitably powerful grace.</p>
</div>
</div>
</body>
</html>
Use following solution instead to get the complete solution.
html,
body {
height: 100%;
}
#container {
min-height: 100%;
float: left;
position: relative;
}
.nav {
width: 20%;
height: 100%;
background-color: #e6e6e6;
position: absolute;
}
JSFiddle link.