I'm trying to create a page where there is a linear-gradient background underneath an inset section of the page, which should not show the gradient colors. In the example below, the top section of the inset is behaving as desired, with the color staying in the background. But for some reason the section underneath it is being infiltrated with the background:linear-gradient.
I can't figure out why:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
font-family: sans-serif;
line-height: 1.5;
}
.inset-container {
background: linear-gradient(orange, black);
}
.inset {
max-width: 80%;
margin: auto;
}
.column-top {
/* eliminates the margin at the top of the first column, so all columns have even height */
margin-top: 0;
}
.columns {
column-count: 2;
column-gap: 40px;
padding-bottom: 20px;
padding-right: 80px;
}
.contents {
font-size: 18px;
padding-bottom: 40px;
padding-top: 20px;
padding-right: 30px;
padding-left: 50px;
}
.articleBasic {
padding-bottom: 40px;
padding-top: 20px;
padding-right: 30px;
padding-left: 50px;
}
/* ID formatting */
#contents {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: white;
}
#Safety {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin-top: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>gradient test</title>
</head>
<body>
<div class="inset-container">
<div class="inset">
<nav id="contents" class="contents">
<h3>Included in this month’s newsletter:</h3>
<p>Safety First: Prescription Safety Glasses - Find out who pays that bill in this months Safety First.</p>
<p>Flux - Which way to the problem? Splitters messing with your head? Read this Flux tip for clarification.</p>
<p>Tool Tip: MDU Maps - Hey, My maps are blank in Divisional Viewer! Well, you’re doing it wrong!</p>
<p>Tool Tip: XM1 Plant Design Maps - Why does all the cool stuff go to the service department?</p>
<p>The Battery Balancer - How much more can we fit in that cabinet?!</p>
<p>DM Ticketing - SASQ Watch because Big Bird was taken.</p>
<p>Viavi’s ONX-630 - Initializing…… That’s an inside joke! You’ll get it later or will you? Just read this for a quick overview of the new meter.</p>
<p>Tales From The Field - Hello, Hello, HELLO! It’s ok to share with the group! Send us your pics!</p>
</nav>
<article id="Safety" class="articleBasic">
<h3>Safety First: Prescription Safety Glasses</h3>
<div class="columns">
<img class="safetyimg" src="https://i.imgur.com/qJWZi01.jpg" alt="funny animated dude with big glasses" title="Click me to go to the benefits page!">
<p class="column-top">Some of my fellow eyeglass wearers may not be aware that Comcast will pay for you to have your prescription safety glasses fully covered! I recently became aware of this information and wanted to share it with all of you. Per our ComcastNow
website, in the Vision Benefits SPD: Davis Vision will cover 100% of the cost, VSP- Safety Vision Glasses (Employee only) Coverage 100% after $20 copay; $75 Frame allowance. This helps us all, with the struggle of trying to wear two sets of
glasses in order to see and be OSHA compliant while working in the field. More information can be found at https://my-benefits.ehr.com/US2/EN/myHealth/Vision/Pages/default.aspx regarding this great benefit. </p>
</div>
Back to Table of Contents
</article>
</div>
</div>
</body>
</html>
You're missing the background color property for the #Safety id.
#Safety{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin-top: 2px;
background-color: white;
}
Just to clarify, are you saying the area with Safety first should have a white background as well? Because you didn't set the white in the CSS.
https://codepen.io/anon/pen/BwVowZ?editors=1100
Related
`This is my CSS code;
/*homepage*/
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&family=PT+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Open Sans';
font-size: 18px;
}
#hero {
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.350),rgba(0, 0, 0, 0.350)), url('./bilder/welcome.jpg') no-repeat center / cover ;
color: white;
}
.navbar {
display: flex;
margin: right auto;
float: right;
}
.navbar nav {
display: block;
padding-right: 12px;
}
.navbar a {
color: white;
font-size: 0.9rem;
font-weight: bold;
text-decoration: none;
line-height: 60px;
padding: 0.4em 0.9em;
border: 2px solid;
border-color: white;
border-radius: 20px;
margin: 9px;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.navbar a:hover {
color:black;
background: rgb(177, 108, 77);
border-color: black;
}
.container {
width: 100%;
height: 90%;
max-width: 1200px;
display: flex;
justify-content: left;
text-align: left;
align-items: center;
margin: 0 auto;
}
.container .hero-text h1 {
font-size: 3rem;
margin-bottom: 0.3rem;
}
.container .hero-text h2 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.container .hero-text p {
font-family: 'PT Sans';
font-size: 1.2rem;
max-width: 70%;
margin: 0 auto;
margin-left: 0;
}
.container .hero-text a {
font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
color: black;
background-color: lightgray;
display: inline-block;
border: 2px solid;
border-radius: 10px;
padding: 0.5em 1.2em;
margin-top: 1rem;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.container .hero-text a:hover {
background: rgb(177, 108, 77);
color: black;
}
.container .bilde-credit p {
opacity: 30%;
color: brown;
font-size: 1.0rem;
margin-top: 0.5rem;
}
#media only screen and (max-width: 768px) {
html {
font-size: 10px;
}
}
/*topical siden*/
p{
font-size: small;
}
.container #text {
margin-top: 20px;
}
h1{
float: right;
}
.footer{
left: 0;
bottom: 0;
width: 100%;
background-color: #000d1a;
color: white;
text-align: center;
}
.topical{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.350),rgba(0, 0, 0, 0.350)), url('/bilder/topical.jpg') no-repeat center / cover ;
color: white;
}
.teknologi{ /*class laget for å justere på bildet*/
float: right;
margin-right: 20%;
}
.footer a {
color: white; /*gir hyperlenkene i footeren en hvit farge framfor blå, for å skape en god kontrast*/
}
.science {
float: right;
margin-right: 20%;
}
`I am struggling to fit my webpage to all screens. When I inspect the page everything just goes over each other, the text, pictures, the footer, etc. I will glady appreciate if someone can check over my code.
This is my HTML code:
<!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>Topical siden</title>
<link rel="stylesheet" href="style.css">
<!--Link som referer siden til stylesheet-->
</head>
<body class="topical">
<!-- NAVBAR -->
<div class="navbar">
<nav>
Hjem
Kafé
Booking
Accessibility
</nav>
</div>
<h1>Topical page - Technology and society </h1>
<!--Tittel-->
<div class="container">
<div id="text">
<h2>The interplay between technology and society</h2>
<!--Undertittel-->
<p>
<!--Paragraf-->
1.2 <img src="/bilder/workplace.png" alt="Bilde av samfunn og teknologi" width="300" height="241" class="teknologi"> <!--BILDE, STØRRELSE + CLASS DEFINERT FOR BILDE FOR Å BRUKE I CSS. HENTET FRA https://blog.vantagecircle.com/technology-in-the-workplace/ -->
The evolution of technology is a fundamental part of society, and it is safe to say that we have benefited from it. In the past we relied on books, but now we have phones that can quickly find answers to our questions. Our workplace has also become safer and more efficient with the introduction of automated technology (Ellingrud, 2018), but it has also contributed to the elimination of certain jobs. However, a study of census conducted over the course of 140 years suggests technology has created more jobs than it has destroyed (Stewart et al., 2015, p. 3). It has also helped maintain jobs through difficult times. Thanks to the communication channels technology provides, jobs could still be done from home during the COVID-19 pandemic. In the same way society progresses, it also starts valuing new things: and what becomes important to us, becomes important to technology. One example being that once we realized the effects of climate change, we started caring about creating sustainable technologies.
Societal values can also have a negative impact. Society has long been obsessed with “the perfect body”, and since it is widely advertised, it has inevitably migrated to the internet and become a part of that world. Now we not only see it in the “real” world, but also on our phones constantly. One could argue that its increased exposure intensifies the pressure of fulfilling the unrealistic body standards our society glorifies, which can lead to body image issues and eating disorders.
<br>
<br> <!--IKKE BRUK BR TAG FOR Å LAGE ROM I AVSNITTENE -->
<p>
<img src="/bilder/science.jpeg" alt="Bilde av diverse ting samfunnet og teknologi " width="250" height="241" class="science"> <!--BILDE, STØRRELSE + CLASS DEFINERT FOR BILDE FOR Å BRUKE I CSS. HENTET FRA https://community.thriveglobal.com/the-relationship-between-science-technology-and-society/ -->
1.4
Taking responsibility and attempting to foresee the possible future outcomes of your creation should be an important part of every innovator’s process. Innovations can have serious societal implications and for that reason it is only fair to expect innovators to take this into consideration. However, we should be somewhat reasonable to which degree we hold them accountable, and that is because RRI is not an easy process. It requires research, cooperation and communication – not just in the form of discussion between innovators, but also in the shape of feedback from society. Society plays a significant role in the development of innovations, as the citizens can bring a unique, diversified perspective that innovators could forget to consider. If we fail to properly communicate our criticisms, we are, arguably, partially responsible.
Even a well-intended innovation that had RRI strongly implemented into its process, can be turned “evil”. Technology is not inherently bad/harmful in itself – it is what we choose to do with it that can make it such. Sadly, there are people who take advantage of innovator’s inventions and “villainize” them in ways they weren’t meant to be utilized. Examples of this include the internet: the internet is good because it provides methods of communication and supplies information, but it has also become a damaging place used for other purposes like cyber-bullying and human trafficking recruitment. With a quick Google search, we can see that laws have been set in place to prevent this, and that there can be severe penalties for committing these offenses. However, I would argue that these crimes are hard to regulate because of the anonymity the internet offers us, and because it is not taken as seriously as other “real life” crimes.
No invention will ever be flawless, and unintended consequences will likely surface regardless – but by practicing RRI we can reduce the severity and number of them.
</p>
</p>
</div>
</div>
<!-- FOOTER UNDER + KILDER -->
<div class="footer">
<footer>
Sources: <br>
Ellingrud, K. (2018). The Upside Of Automation: New Jobs, Increased Productivity And Changing Roles For Workers. Retrieved from https://www.forbes.com/sites/kweilinellingrud/2018/10/23/the-upside-of-automation-new-jobs-increased-productivity-and-changing-roles-for-workers/?sh=5237c0d47df0
<br> Stewart, I., De, D. & Cole, A. (2015). Technology and people: The great job-creating machine. 1-16. Retrieved from https://www2.deloitte.com/content/dam/Deloitte/uk/Documents/finance/deloitte-uk-technology-and-people.pdf>
</footer>
</div>
</body>
</html>
I have tried to use % instead of px and vh but the problem still won't be solved.
I'm making a portfolio page with html/css at the basic level
I made a button with an animation effect using pseudo-class: active.
Below is my html, css code.
div,
input,
textarea {
box-sizing: border-box;
}
body {
margin: 0;
}
html {
line-height: 1.15;
}
* {
margin: 0;
padding: 0;
}
.main-bg {
background: rgb(2, 0, 36);
background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(172, 224, 255, 1) 0%, rgba(106, 166, 241, 1) 0%, rgba(73, 73, 182, 1) 100%);
width: 100%;
height: 1000px;
}
.main-introduction {
color: white;
width: 40%;
padding: 10px;
position: relative;
left: 100px;
top: 100px;
}
.main-introduction>h1,
p {
margin-bottom: 10px;
}
.showBtn {
/* margin-top: 10px; */
width: 110px;
padding: 15px;
border-radius: 15px;
background: rgb(98, 98, 98);
color: white;
border: none;
box-shadow: 3px 3px 3px black;
transition-duration: 0.3s;
cursor: pointer;
}
.showBtn:active {
margin-left: 5px;
margin-top: 5px;
box-shadow: none;
}
.phone {
width: 30%;
position: relative;
left: 1000px;
top: 2px;
}
.white-banner {
background: white;
text-align: center;
padding: 20px;
height: 200px;
}
.white-banner>h4,
p {
margin-bottom: 20px;
}
```
<body>
<div class="main-bg">
<div class="main-introduction">
<h1>Frontend Student Developer, <span style="font-size: larger; color: rgb(165, 255, 252);">Dan</span></h1>
<br>
<p>Always considering improvements, growing, code.</p>
<p>Recently fell in love with developing.</p>
<button class="showBtn">Show More</button>
</div>
<div>
<img src="img/phone.png" alt="phone" class="phone">
</div>
<div class="white-banner">
<h4>god tell us the reason youth is wasted on the young</h4>
<p>Lorem ipsum dolor sit amet consectetur elit.</p>
<button class="showBtn" style="width: 150px;">Show Portfolio</button>
</div>
</div>
</body>
When I cliked a button, as you saw, animation effect is happen by giving margin when I clicked(:active) btn.
But Phone image and white-banner also got animation effect!!
I thought about margin collapse. However, it was judged that it was not because the upper and lower borders were not overlapped.
Also I tried giving some additional margin. (Annotated code on .showBtn) But..
It didn't work, but rather the shadow effect turned strange. I also want to know why shadow effect turned strangely.
I don't know why this happened..
Problem : your 'html structure objects' interact with each others.
You can solve it too much ways with using css.
But you have to know this : 'The right way is only a few.'
This way is better for you : 'Learn more about CSS.'
For example :
Option 1 : Seperate your main objects divs and give they are some height and width.
Place they are right and left side.
// But you will have to give they are responsive behaviors.
// You will need some css experience.
Option 2 : Make your hero image 'absolute' not 'block'.
// And you will need for place it 'very well' some css knowledge like flex.
// learn 'flex'.
Option 3 : You can use your image like a background-image for your div.
// and make it contain, re-size and place it with some responsive behaviors.
// it will be never interaction with other html elements.
Option 4 : Use grids for seperate your html objects for not-interact with each others.
// learn grids.
// =============== best way. =============== //
if you don't want to save only today...
Examine other's similar html/css code examples.
Find similars but responsive ones.
// =============== best way. =============== //
i'm new and after finishing my site i realized the parts i created are not responsive is there a way to fix it without starting from scratch?
herer is my css, i tried to add media query and put the width to 100% but it didn't help the problem.
.main_content {
display: flex;
justify-content: center;
}
.main_content h1 {
margin-top: 80px;
display: inline-block;
width: 50vw;
text-align: center;
font-family: "henny penny";
color: #995932;
}
.main_content p {
margin-top: 10px;
display: inline-block;
font-family: "roboto";
color: #995932;
background-color: #fdc8a8;
width: 50vw;
height: 50vh;
padding: 30px 30px;
text-align: justify;
line-height: 4.5vh;
box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}
.sub_content {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 50px;
}
.sub_content div {
width: 40vw;
margin: 20px;
}
.sub_content h2 {
text-align: center;
font-family: "henny penny";
color: #9c9c27;
}
.sub_content p {
text-align: justify;
font-family: "roboto";
color: #aaaa36;
padding: 40px 40px;
background-color: #ffff99;
line-height: 3.5vh;
box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}
.mayor_content h2 {
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
font-family: "henny penny";
color: #5a873b;
}
.mayor_content div {
margin: 0 auto;
width: 80vw;
height: 80vh;
text-align: center;
background-color: #b6db9d;
box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}
.mayor_content div h3 {
margin-bottom: 20px;
font-family: "henny penny";
color: #5a873b;
}
.mayor_content div p {
display: inline-block;
text-align: justify;
width: 35vw;
height: 20vh;
color: #547c39;
}
.mayor_content img {
width: 150px;
height: 200px;
position: relative;
bottom: 300px;
left: 570px;
image-rendering: crisp-edges;
}
the html seems organized but if i could order it more then i would be happy to.
<main>
<section>
<div class="main_content">
<div>
<h1>Mardi Gras in New Orleans</h1>
<p>The holiday of Mardi Gras is celebrated in all of Louisiana, including the city of
New
Orleans.
Celebrations
are
concentrated for about two weeks before and through Shrove Tuesday, the day before Ash Wednesday
(the
start
of
lent in the Western Christian tradition). Usually there is one major parade each day (weather
permitting);
many
days have several large parades. The largest and most elaborate parades take place the last five
days of
the
Mardi Gras season. In the final week, many events occur throughout New Orleans and surrounding
communities,
including parades and balls </p>
</div>
</div>
<div class="sub_content">
<div>
<h2>Traditional colors</h2>
<p>The colors traditionally associated with Mardi Gras in New Orleans are green, gold,
and
purple. The
colors
were first specified in proclamations by the Rex organization during the lead-up to their
inaugural
parade
in 1872, suggesting that balconies be draped in banners of these colors. It is unknown why these
specific
colors were chosen; some accounts suggest that they were initially selected solely on their
aesthetic
appeal, as opposed to any true symbolism.</p>
</div>
<div>
<h2>Costumes and masks</h2>
<p>In New Orleans, costumes and masks are seldom publicly worn by non-Krewe members on
the
days before Fat
Tuesday (other than at parties), but are frequently worn on Mardi Gras. Laws against concealing
one's
identity with a mask are suspended for the day. Banks are closed, and some businesses and other
places
with
security concerns (such as convenience stores) post signs asking people to remove their masks
before
entering.</p>
</div>
</div>
</section>
<div class="break_point2"></div>
<section class="mayor_content">
<h2>Mayor of New Orleans</h2>
<div>
<h3>LaToya Cantrell</h3>
<p>LaToya Cantrell born April 3, 1972 is an American politician serving as the Mayor of New
Orleans, Louisiana, a post she has held since May 7, 2018. A Democrat, Cantrell is the first woman
to
hold the post. Before becoming mayor, Cantrell represented District B on the New Orleans City
Council
from 2012–2018.</p>
</div>
<img src="./images/mayor.jpeg" alt="LaToya Cantrell">
</section>
</main>
Because you are using vw in certain places, this unit takes a fixed percentage of browser size of 50vw mean 500px of 1000px screen and 50px of 100px screen, I would suggest to use rem instead also, you can go a bit advanced and use css clamp() to fix width of multiple screen at once.
I'm trying to get a border like the picture below:
But instead of dots, I want to use a picture of a car with the background cut out.
A little line of cars all the way around the box.
How can I do that?
Here's my attempt:
.box-head {
padding: 10px;
margin: 0px auto;
width: 50%;
border: 5px;
border-radius: 10px;
text-align: center;
background: linear-gradient(to right, #00e6ff, #6418ff);
font-family: cursive;
}
<!DOCTYPE html>
<html>
<head>
<title>Skyline's Pointless Website</title>
<link rel="border" href"border.png">
</head>
<body>
<div class="box-head">
<h1>Welcome fello plebs to this completely pointless website.</h1>
<p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
</div>
</body>
</html>
Here's the car image:
Here's an example using border-image:
The border-image CSS property lets you draw an image in place of an element's border-style.
.box-head {
padding: 42px;
width: 60%;
text-align: center;
font-family: cursive;
border-image-source: url("//mdn.mozillademos.org/files/6017/border-image-6.svg");
border-image-slice: 42 fill;
border-image-width: 42px;
border-image-repeat: round;
}
h1 {
font-size: 16px;
}
p {
font-size: 12px;
}
<div class="box-head">
<h1>Welcome fello plebs to this completely pointless website.</h1>
<p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
</div>
Using an online generator might help demonstrate how it works:
MDN
border-image.com
Also see:
css-tricks.com
bitsofco.de
thenewcode.com
Edit
You explained that you want a line of cars around the box.
To do this with border-image, make an image with the car tiled in a 3x3 grid. The different "zones" are described in documentation for border-image-slice:
Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.
Zones 5-8 are edge regions. These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword fill is set.
Here's my example image:
Here's a working example of the border:
.box-head {
padding: 30px 100px;
width: 60%;
text-align: center;
font-family: cursive;
border-style: solid;
border-image-source: url("//i.stack.imgur.com/ODGdz.png");
border-image-slice: 30 100;
border-image-width: 30px 100px;
border-image-outset: 0;
border-image-repeat: round;
}
h1 {
font-size: 16px;
}
p {
font-size: 12px;
}
<div class="box-head">
<h1>Welcome fello plebs to this completely pointless website.</h1>
<p> You may notice this website isn't that good. I just started learning html and css so leave me alone.</p>
</div>
For more reference on this method, see:
Making a Border of a Single Repeating Image
Border Imaging
EDIT
Here's an example with the cars rotated:
.box-head {
padding: 30px 50px;
width: 60%;
text-align: center;
font-family: cursive;
border-style: solid;
border-image-source: url("//i.stack.imgur.com/YQ4EO.png");
border-image-slice: 30 100;
border-image-width: 30px 100px;
border-image-outset: 0;
border-image-repeat: round;
}
h1 {
font-size: 20px;
}
p {
font-size: 16px;
}
<div class="box-head">
<h1>Welcome, humans, to this amazing website.</h1>
<p> You may notice this website tickles your brain. I just started learning HTML and CSS, so the universe is wide open!</p>
</div>
Basically, I used everything from break tags, to paddings and margins but nothing seems to work. My problem is on this image:
I can't seem to find a way to separate the "user profile div" and the "article on". I can post my CSS if you need it!
EDIT:
HTML:
<!-- begin user_panel -->
<div id="user_panel">
<!-- user_img -->
<div id="user_img">
<center><img src="images/avtr.png" alt="" title="Welcome, wallensteiN." /></center>
</div>
<!-- user_profile -->
<div id="user_profile">
<table>
<tr>
<td style="width: 300px; float: left;">
<h1>Welcome, wallensteiN.</h1>
<p> • Last visit: Dec 01, 2014; 15:30.<br> • You currently have <span class="online">5</span> friends online.<br> • Inbox - no new messages.<br> • Edit your profile.<br> • Chat with the community!<br> • Change password.<br> • Log out of this session.</p>
</td>
<td style="width: 500px; float: right;">
<h1>Latest activity on the website</h1>
<p> • wallensteiN commented in How to get better at DotA in 3 steps.<br> • Artzeezy commented in Interview with EG's Arteezy.<br> • NewsBot posted Interview with EG's Arteezy.<br> • NewsBot posted How to get better at DotA in 3 steeps.</p>
</td>
</tr>
</table>
</div>
</div>
<!-- end user_panel -->
<!-- begin content -->
<div id="content">
<!-- begin slider -->
<div id="slider">
</div>
<!-- end slider -->
<!-- begin article -->
<div id="article">
<h1>Welcome to "Shooter"</h1>
<p> • Enjoy this template!</p>
<h1>Interview with EG's Arteezy</h1>
<p> • Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy could cease green oh.</p>
<p> • Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.</p>
<h1>How to become better at DotA in 3 steps</h1>
<p> • Yourself required no at thoughts delicate landlord it be. Branched dashwood do is whatever it. Farther be chapter at visited married in it pressed. By distrusts procuring be oh frankness existence believing instantly if. Doubtful on an juvenile as of servants insisted. Judge why maids led sir whose guest drift her point. Him comparison especially friendship was who sufficient attachment favourable how. Luckily but minutes ask picture man perhaps are inhabit. How her good all sang more why.</p>
<p> • Sense child do state to defer mr of forty. Become latter but nor abroad wisdom waited. Was delivered gentleman acuteness but daughters. In as of whole as match asked. Pleasure exertion put add entrance distance drawings. In equally matters showing greatly it as. Want name any wise are able park when. Saw vicinity judgment remember finished men throwing.</p>
</div>
<!-- end article -->
<!-- begin sidebar -->
<div id="sidebar">
</div>
<!-- end sidebar -->
</div>
<!-- end content -->
CSS
/* begin user panel */
#user_panel{
width: 1100px;
margin: 0 auto;
margin-top: 25px;
}
#user_panel #user_img{
width: 200px;
height: 200px;
float: left;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
}
#user_panel #user_img img{
margin-top: 25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 1px solid #111;
}
#user_panel #user_profile{
width: 850px;
height: 200px;
float: right;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
}
#user_panel #user_profile a{
color: #F90;
}
#user_panel #user_profile a:hover{
color: #FFF;
}
#user_panel #user_profile h1{
font-family: Century Gothic;
font-size: 23px;
color: #FFF;
padding-left: 15px;
}
#user_panel #user_profile p{
font-family: Century Gothic;
font-size: 15px;
color: #FFF;
padding-left: 15px;
}
/* begin content */
#content{
width: 1065px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
overflow: auto;
padding-left: 15px;
margin-bottom: 25px;
}
#content #slider{
}
#content #article{
float: left;
width: 700px;
}
#content #article h1{
width: 500px;
font-family: Century Gothic;
font-size: 23px;
border-bottom: 5px solid #F90;
}
#content #article p{
font-family: Century Gothic;
font-size: 15px;
color: #FFF;
}
Footer isn't finished yet!
Add the following CSS to create a margin:
#user_panel {
margin-bottom: 20px; /* <- Adjust this number to suit your needs */
}
And you'll see the separation between the divs you're seeking.
You assign a 0 margin to the top and bottom with margin: 0 auto; and then later give it a margin-top: 25px; which handles the top, but you never space the bottom. That's why it's appearing flush with the top panel.
EDIT
Working JSFiddle
The reason your margin declarations aren't working is that you've floated everything in your user_panel box, which causes it to collapse. The margins are there, but it's not taking up enough space in the DOM to push down the content div.
Add this CSS (a clearfix) and it'll work.
#user_panel:after {
content: '';
display: table;
clear: both;
}
Important! – Don't forget to add the original margin:
#user_panel {
margin-bottom: 25px;
}
I think your problem is that you are floating the user_panel but not the #content.
Can you float this?
if so use:
#content{
width: 1065px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
overflow: auto;
padding-left: 15px;
margin-bottom: 25px;
float: left;
clear: both;
}
And also you need to add a clearfix to the user_panel
#user_panel:after {
content: "";
display: table;
clear: both;
}
here is the working fiddle:
http://jsfiddle.net/lee_gladding/95ovfh5g/