Issue
I have a white box that is floated left. I adjusted it to the center and I want it to overlap the background image of my title. But when I adjust the margin negative, to make it go up and overlap the background image at the top, it just cuts itself off. I can't figure out why
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<title>Try Slim Leaf</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<div class="container">
<div class="row1">
<div class="header">
Women Over 35: Struggling With Stress Eating And Worried About How That’s Going Straight To Your Waistline?
</div>
</div>
</div>
</section>
<section><!--Hero Title-->
<div class="container">
<div class="row1">
<div class="hero-img">
<h2>“I Lost <span class="red-text">53 Pounds</span> Eating Cakes, Pizza & Ice Cream… By Flipping The</h2>
<h1>SUGAR SWITCH</h1>
<h2>Inside My Body…”</h2>
<h3>Discover How A <span class="red-text"><strong>“Near-Tragic”</strong></span> Experience Led An<br>
Arkansas Woman To Discover The Secret <span class="red-text"><strong>“Sugar Switch...”</strong></span><br>
And Lose Weight While Eating Delicious Carbs
</h3>
<h4>Now You Can Use This Breakthrough To Shed Unwanted Weight From The Comfort Of Your Home Too!</h4>
</div><!--End Hero Img-->
</div><!--End Row 1-->
</div><!--End Container-->
</section><!--End Hero Title-->
<main><!--Main Content-->
<section><!--Section 1-->
<div class="container">
<div class="row1 bg-gray">
<div class="box-white">
<div class="col">
<div class="col1"><img src="images/img1.png" alt="" width="368" height="796" class="fluid-img"/></div>
<div class="col2">
<p class="std-p">Hey, my name’s Katie Patterson.</p>
<p class="std-p"><strong>Over the next few minutes, I’m about to tell you my shameful story about how I nearly let my 5-year-old son drown…</strong></p>
<p class="std-p">All because I was too out-of-shape to run 30 steps to save him.</p>
<p class="std-p">Truthfully, I let myself go over the years…</p>
<p class="std-p">And it got to the point I could barely stand the way I looked in the mirror.</p>
<p class="std-p">My love life with my husband was practically non-existent.</p>
<p class="std-p">I avoided taking photos with friends…</p>
<p class="std-p">Seeing those pictures on social media made it painfully obvious how <strong>“big”</strong> I was compared to them.</p>
<p class="std-p">And as much as I felt like I was <strong>“cursed”</strong> with bad genes and a body that piled on stubborn fat…</p>
<p class="std-p">The tipping point came when being overweight nearly made my son drown.</p>
<p class="std-p">Today, I’m relieved to say, my son’s okay…</p>
<p class="std-p"><strong>AND there’s a silver lining too.</strong></p>
<p class="std-p">Because this near-tragic experience led me to discover…</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
I am a beginner and I hope somebody can help.
Thank you. I appreciate any advice.
Solution
From the comments above:
It is the overflow-x on .bg-gray. If you remove that the image extends beyond the parent element as you desire. I'm looking for other solutions in place of the overflow property.
overflow-y: visible; will allow your image to overflow, auto will contain any elements and create scrolling when necessary. Since this is negative margin it does not create a scroll.
Without the overflow-y your background image does not appear because you have floated all of the children and therefore .bg-gray, aka .row1 has no height.
For column layouts you should look up the more modern approach of using flexbox. Remove your floats and add display: flex; to .col
CSS
.col {
display: flex;
}
You should see your image overflow the parent and your columns sit side-by-side.
IF YOU MUST USE floats I recommend not using overflow property to get the parent to contain the floats and rather use a technique where you add an (pseudo) element to the document AFTER the the floats that clears the floats and effectively gets the parent element to wrap your floated elements.
For your example you would need something like this:
CSS
.row1::after {
content: '';
display: table;
clear: both;
}
Idk if you are using SCSS yet, but in the case you do or for others:
Reference: http://nicolasgallagher.com/micro-clearfix-hack/
SCSS Placeholder class to use with @extend
%clear {
&::after {
content: '';
display: table;
clear: both;
}
}
.row {
@extend clear;
}
SCSS Mixin to use with @include
@mixin clear {
&::after {
content: '';
display: table;
clear: both;
}
}
.row {
@include clear;
}
Answered By - dylanjameswagner Answer Checked By - Mildred Charles (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.