When use auto height with float its not work but when remove float its work fine. how can fix it ?
there is DIV with auto height (aboutus) ,inside it is another div (aboutus-title p) with float left but the content is overflow how can all content inside div with auto height ?
http://jsfiddle.net/haeb0q8d/1/
.aboutus {
position: relative;
z-index: 2;
width: 100%;
height: auto;
background: #333333;
}
.aboutus-title div h1{
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 80px;
color: #fcd803;
}
.aboutus-title hr {
margin: 0 auto;
border: 0;
height: 1px;
background: #333;
margin-top: 30px;
width: 60px;
}
.aboutus-detail {
width: 100%;
}
.aboutus-detail p{
text-align: center;
color: #fcd803;
line-height: 25px;
font-size: 17px;
margin-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
float: left;
}
<div class="aboutus" id="aboutus">
<div class="aboutus-title">
<div><h1>about</h1></div>
<hr>
<div class="aboutus-detail">
<p>
We are a tight knit team of digital thinkers, designers and<br>
developers, working together to create fresh, effective projects<br> delivered personally.
</p>
</div>
</div>
</div>
You have to clear float with clear: both.
.aboutus {
position: relative;
z-index: 2;
width: 100%;
height: auto;
background: #333333;
}
.aboutus-title div h1 {
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 80px;
color: #fcd803;
}
.aboutus-title hr {
margin: 0 auto;
border: 0;
height: 1px;
background: #333;
margin-top: 30px;
width: 60px;
}
.aboutus-detail {
width: 100%;
}
.aboutus-detail p {
text-align: center;
color: #fcd803;
line-height: 25px;
font-size: 17px;
margin-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
float: left;
}
.clear {
clear: both;
}
<div class="aboutus" id="aboutus">
<div class="aboutus-title">
<div>
<h1>about</h1>
</div>
<hr>
<div class="aboutus-detail">
<p>We are a tight knit team of digital thinkers, designers and
<br>developers, working together to create fresh, effective projects
<br>delivered personally.</p>
</div>
</div>
<div class="clear"></div>
</div>
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
My banner is meant to be directly under the navigation bar but as of now, there is a space between it. I tried to use top for css and it doesn't move.
The css for the banner is:
/*Index CSS*/
* {
margin:0px; padding: 0px;
}
body {
position: absolute;
width: 1250px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#wrapper {
background-color: rgb(161, 193, 217);
position: absolute;
width: 1250px;
height: auto;
margin-left: 5px;
margin-right: 5px;
}
#welcome {
background: url(../Resources/Header/CUiZMwBXAAAQy1M.jpg);
width: 1250px;
height: 480px;
}
#WelcomeTo {
color: white;
font-size: 55px;
text-align: center;
font-family: Bebas;
margin-top: 100px;
}
#LittleChef {
color: white;
font-size: 60px;
text-align: center;
font-family: Candy Shop Personal Use;
}
<div id="welcome" name="banner">
<div id="WelcomeTo" name="WelcomeTo">
<h1>WELCOME<br>TO</h1>
</div>
<div id="LittleChef" name="LittleChef">
<h1>Little Chef</h1>
</div>
</div>
I've had this problem for a very long time. Here is a screenshot to what it looks like as of now.
it is because the margin of your h1 element.
the solution is set the margin-top of h1 to 0.
Or you can set the padding of the wrapper
That's the code: https://codepen.io/vendettashakur/pen/rmLYBN
I want to know how can I move the image with the case upper.
body {
background: #333;
}
.wrapper {
padding: -10px;
margin: 10px;
margin-right: 900px;
text-align: center;
}
.treasure {
color: #fff;
display: inline-block;
max-width: 400px;
text-align: center;
padding: 70px;
margin: 20px;
font-size: 25px;
font-weight: bold;
}
.block {
padding: 4px;
background: #7c4dff;;
border-radius: 2px;
margin-left: 4px;
}
.subcase {
color: white;
display: inline-block;
max-width: 2000px;
text-align: center;
font-size: 15px;
font-weight: bold;
padding: -20px;
margin: -76px;
vertical-align: text-top;
}
.treasureimage {
display: inline-block;
max-width: 2000px;
padding: 10px;
vertical-align: text-top;
}
<div class="wrapper">
<p class="treasure">
Treasure Chest
<span class="block">
$1
</span></p>
<br>
<p class="subcase">
10% chance of getting a top-grade game</p>
<br>
<img class="treasureimage">
<img src="https://gamedrop.win/img/cases/case_blue.png" alt="case" style="width:200px;height:128px"> </img>
The image has to be perfectly arranged to look nice. That's all. I tried with padding, margin etc and nothing works for me.
If you are expecting the image to be moved after the text "Treasure Chest" then in your html move the <img> tag after first <p> tag
I've got three DIVs that I've put into a container DIV.
What I want is as follows:
Here's where I'm up to:
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
}
#leftdiv {
float: left;
padding: 0 20px;
/*margin:20px 0;*/
position: relative;
width: 25%;
flex-basis: 25%;
}
#leftdivcontainer {
vertical-align: middle;
width: 100%;
text-align: center;
}
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height: 40px;
}
<div id="light-table">
<h3 id="light-table-head-style">content.</h3>
<div id="leftdivcontainer">
<div id="leftdiv">
<p id="light-table-paragraph">Left</p>
</div>
<div id="leftdiv">
<p id="light-table-paragraph">Middle</p>
</div>
<div id="leftdiv">
<p id="light-table-paragraph">Right</p>
</div>
</div>
</div>
Please can someone help tell me where I'm going wrong?
Thanks!
Scott
set the div the contains the three small divs display:flex and give it 75% width of the container, then set space around the content as follow:
#leftdiv {
/*float: left;*/
padding:0 20px;
/*margin:20px 0;*/
position:relative;
/* edits */
width:33.33%;
flex-basis: 25%;
}
#leftdivcontainer {
vertical-align:middle;
text-align: center;
/* edits */
width:75%;
display: flex;
margin: 0px auto;
justify-content: space-around;
}
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height:40px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top:30px;
margin-bottom: 30px;
}
<div id="light-table">
<h3 id="light-table-head-style">content.</h3>
<div id="leftdivcontainer">
<div id="leftdiv"><p id="light-table-paragraph">Left</p></div>
<div id="leftdiv"><p id="light-table-paragraph">Middle</p></div>
<div id="leftdiv"><p id="light-table-paragraph">Right</p></div>
</div>
</div>
Here's how I would do it.
Give each .leftdiv (indeed this should be a class, id's are unique) 33% of total viewport width:
.leftdiv {
float: left;
width: 33%;
}
and center each paragraph inside these divs, give it 75% width:
.leftdiv p {
display: block;
width: 75%;
margin: 0 auto !important; /* you won't need !important if your code is well structured */
}
This is a cleaner solution, as you'll notice there is no horizontal scroll present.
Here is a codepen.
Also, you need to clear your parent div #leftdivcontainer (did that as well).
Hope this helps.
I'm trying to float an image to the right of an unordered list using float: left, but the picture stays stubbornly underneath the div with the ul.
I've tried `display: inline-block, I've tried making them all block level elements, and I've messed with the margins and padding on both but the more I mess with the margins the less the code looks like the blueprint I've been given. Perhaps I don't fully grasp how floats work exactly.
Why won't the image float to the right of the div with the list?
Here's the relevant HTML:
<div id="introText" class="margins">
<p>Now you can get the digital sound quality you want at an affordable price. With more than 50 years of microphone innovation, Sony introduces the new UWP-D wireless microphone system. Just because your project is budget-driven doesn't mean you have to compromise on sound quality.</p>
<p>Sony's new wireless mics are the ideal audio-for-video solution that will boost the performance of even entry-level camcorders. Choose from among three packages, any of which are well-suited for ENG and field production or any budget-conscious application requiring high-quality digital audio.</p>
</div>
<div class="listWrap benefitsList">
<div class="inLine">
<div class="heading">
<p id="listHeading" class="margins">Key Benefits:</p>
</div>
<ul class="ulBenefits">
<li><p>Wide range with up to 72 channels</p></li>
<li><p>Three separate UHF frequency blocks available</p></li>
<li><p>USB Portable Charger w/Lithium-Ion Battery and AC adapter</p></li>
<li><p>Sturdy metal body construction</li>
<li><p>Digital audio processing</li>
<li><p>A DSP compander provides superb transient response performance</p></li>
<li><p>Wide switching RF bandwidth with 3 UHF frequency blocks available</p></li>
<li><p>True diversity receiver for stable reception</p></li>
<li><p>Output audio gain control on receiver</p></li>
<li><p>Headphone output on receiver</p></li>
<li><p>Handheld TX includes interchangeable capsule design</p></li>
<li><p>Mic or line input on both body-pack and plug-on transmitters</p></li>
<li><p>Sony UWP/800 Series & Legacy Analog Wireless System compatibility</p></li>
</ul>
</div>
<div class="inLine cameraDiv">
<img id="camera" alt="Camera" src="images/camera.jpg" />
</div>
</div>
<div class="clearIt blockIt">
<img id="headingTwo" alt="Digital Sound Innovation for Analog Systems" src="images/headerTwo.jpg" />
</div>
And here's the relevant CSS:
#listHeading {
background: #eceeef;
margin: 6px 13px;
}
#camera {
width: 354px;
height: 380px;
}
.inLine {
display: inline-block;
}
#camera, .listWrap {
display: inline-block;
}
.listWrap {
margin-left: 1px;
}
.benefitsList {
width: 422px;
float: left;
margin-top: 0;
}
.cameraDiv {
width: 354px;
float: left;
margin-top: 3px;
display: inline-block;
}
.heading {
margin-left: 25px;
width: 422px;
height: 40px;
background: #eceeef;
vertical-align: middle;
}
.heading #listHeading{
margin-top: 4px;
padding-top: 12px;
background: #eceeef;
font-size: 16px;
font-weight: bold;
vertical-align: middle;
}
.ulBenefits {
padding-left: 20px;
}
.ulBenefits li{
margin-bottom: 7px;
border-bottom: 1px solid #eceeef;
font-size: 12px;
font-family: Arial, sans-serif;
list-style-type: disc;
padding: 0;
}
.ulBenefits li p{
margin: 5px 0;
padding: 0;
}
#headingTwo {
margin-top: 30px;
}
The problem is the "camera.jpg" image. It always appears on the next line. Any ideas? Thanks in advance! Here's a fiddle of the issue: http://jsfiddle.net/S3523/
The camera image SHOULD be to the right of and on the same line as the unordered list above it. But instead it returns to the next line.
The problem is you're specifying a fixed width for the parent .benefitsList element so the image has no space to actually float to the left of the child list. So I removed the width on .benefitsList, floated .inLine left and it works.
Here's the CSS
<style>
.landingWrapper{
font-family: Arial, sans-serif;
font-size: 14;
width: 784px;
display: block;
}
.blockIt {
display: block;
}
.clearIt {
clear: both;
min-height: 50px;
}
.margins {
margin-left: 35px;
margin-right: 35px;
}
.introText {
margin-bottom: 50px;
}
#listHeading {
background: #eceeef;
margin: 6px 13px;
}
#camera {
width: 354px;
height: 380px;
}
.inLine {
display: inline-block;
float:left;
}
#camera, .listWrap {
display: inline-block;
}
.listWrap {
margin-left: 1px;
}
.benefitsList {
float: left;
margin-top: 0;
}
.cameraDiv {
width: 354px;
float: left;
margin-top: 3px;
display: inline-block;
}
.heading {
margin-left: 25px;
width: 400px;
height: 40px;
background: #eceeef;
vertical-align: middle;
}
.heading #listHeading{
margin-top: 4px;
padding-top: 12px;
background: #eceeef;
font-size: 16px;
font-weight: bold;
vertical-align: middle;
}
.ulBenefits {
padding-left: 20px;
}
.ulBenefits li{
margin-bottom: 7px;
border-bottom: 1px solid #eceeef;
font-size: 12px;
font-family: Arial, sans-serif;
list-style-type: disc;
padding: 0;
}
.ulBenefits li p{
margin: 5px 0;
padding: 0;
}
#headingTwo {
margin-top: 30px;
}
#secondaryText {
margin-bottom: 25px;
width: 714px;
}
.diagrams{
margin-bottom: 15px;
min-height: 50px;
width: 713px;
height: 195px;
}
.infoBox{
border: 1px solid #eceeef;
border-top: 10px solid #eceeef;
width: 211px;
display: block;
margin-left: 35px;
margin-top: 15px;
float: left;
}
.infoBox p {
margin-left: 6px;
margin-right: 6px;
}
#walkieTalkieOne {
width: 209px;
height: 186;
}
#walkieTalkieTwo {
width: 210px;
height: 186;
}
#walkieTalkieThree {
width: 211px;
height: 186;
}
.infoHeader {
font-weight: bold;
font-size: 20px;
margin-bottom: 0;
}
.infoDesc{
margin-bottom: 15px;
margin-top: 5px;
}
.closer {
display: block;
margin-top: 50px;
clear: both;
position: relative;
top: 25px;
}
#resellerButton {
margin-bottom: 50px;
clear: both;
position: relative;
top: 25px;
}
#resellButtLink{
text-decoration: none;
clear: both;
position: relative;
top: 25px;
}
</style>
You can see it here
Try moving the element to before the content - otherwise, it's just going to float what comes after it... which is nothing.