I don't really understand why my float: right; div is below container div. I have no idea how to fix this. Can someone please explain? I had this problem long time ago on another website, but totally forgot how I managed to fix it if I did it at all. I want it to be inside the container of course.
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
</div>
-
#menu
{
width: 960px;
height: 70px;
margin: auto;
background-color: blue;
}
#menu .thumb
{
background-color: aqua;
float: right;
height: 60px;
width: 400px;
}
You should read this web page: https://css-tricks.com/all-about-floats/
The most important part is this:
The Great Collapse
One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.
You can usually fix this by adding a "clearing" div at the end of your container, like this:
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
<div style="clear: both;"></div>
</div>
When you float an element, it loses all height. Therefore, the container does not know to expand to contain it. You must give the container a height large enough to contain the floated element.
Alternately, you can include a clearing div just below your floated element. This is the "so-called" clearfix, and will force the container to contain the floated element as expected.
To add a clearing div, you can add the following to your markup:
<div class="thumb"></div>
<div class="clearfix"> </div> <!-- Add this line -->
</div>
and in your CSS:
.clearfix {
clear: both;
font-size: 1px;
}
float: right; will move the element to the right of the non-floating elements after it (I am talking about HTML markup). See if this works:
<div id="menu">
<div class="thumb"></div>
<div class="categories"></div>
<img class="logo" src="#" />
</div>
Use floats for all your main divs, and have overflow: hidden for your #container
Related
I have some images in the footer, wrapped in tags. For some reason they are not working whatsoever... I am totally lost.
website is HERE
any help would be great (footer is on every single page on the site)
relevant html:
<div class="socialLinks">
<div class="footerTitle">Follow Us At</div>
<div class="iconsContainer">
<a href="https://www.facebook.com/NewWaveAcademyMMA/">
<img class="socialicon" src="../images/fb.svg">
</a>
<a href="https://twitter.com/NewWaveMMA?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
<img class="socialicon" src="../images/twit.svg">
</a>
<a href="https://www.instagram.com/newwaveacademymma/">
<img class="socialicon" src="../images/insta.svg"></a>
</div>
</div>
Your .footercopyright div is overlapping the rest of your footer.
Since you're using floats to align the .affiliations and .sociallinks divs, you should wrap them in a clearfix. This will clear your floats and prevent your copyright div from expanding to fill the space.
<div class="footerbox">
<div class="clearfix">
<div class="affiliations"></div>
<div class="socialLinks"></div>
</div>
<div class="footercopyright"></div>
<div>
.clearfix:after {
content: "";
display: table;
clear: both;
}
The links on your webpage are working. You are unable to click on the links because you have placed a div over your links. Actually, you are clicking this div, not the links. This is the div (look it up in the browser console):
<div class="footercopyright">Copyright, All Rights Reserved NWA 2018</div>
You may resolve this by either removing this div, or by setting a higher z-index for the links container.
you can add clear in below class and work.
Also, noticed small dotted below links::
You use display:inline-block; on <a> to remove this
`.footercopyright {
position: relative;
color: #232528;
max-width: 100%;
font-size: 10pt;
text-align: center;
padding: 5px 0px;
clear: both;
}`
I created a div id="A" and div id="B" and placed the latter div inside div A. Div A has a background-color attribute, but the inside div shows up as its own separate div without the A's background-color. I thought a div within a div would take the attributes of parent div. Instead, div A shows up with 0 height on the browser. The divs below follow the same structure and are just named differently: 'AboutPictures'(A) and 'ya'(B)
<div id="AboutPictures">
<div id="ya">
<img style='border:5px solid #F00' src="http://41.media.tumblr.com/3ad1ef80a08560a7e5f6be2b31f13c2/tumblr_n5wto2Ukmf1txjmgjo1_1280.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<figure>
<figcaption>Hello I am Edward</figcaption>
</figure>
</div>
</div>
CSS:
#AboutPictures {
background-color: rgb(0,200,255);
height:100%;
}
#ya{
float:right;
}
#ya figure{
float:right;
}
Since your #ya div is floated, the parent div just sees empty content. You need to clear the #AboutPictures div, by applying the clear: both style. See: What is a clearfix?
Working example:
<div id="AboutPictures">
<div id="ya">
<img style='border:5px solid #F00' src="https://placehold.it/350x150">
<div style="clear: both;"></div>
<figure>
<figcaption>Hello I am Edward</figcaption>
</figure>
</div>
<div style="clear: both;"></div>
</div>
Hey there are different possibilities to solve this:
you could add a float: right / left; to your outer div (#AboutPictures)
or you could set it to display: inline-block;
See this fiddle: https://jsfiddle.net/8j2zpfdg/
Another SO answer as reference: How to make div not larger than its contents?
So I have the following structure:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
</div>
With no CSS, the containing div extends to the image height, which is on the left side of the div.
Now I want to put that image on the right of the div instead of the natural left. If I use float: right; on the .logo class, the <a> element is taken out of the flow so my containing div won't extend to the picture height anymore (it will have a height=0).
I tried to wrap the <a> element into another div and give the logo class to it (in case it needs to be a block element), but same behaviour.
So I'm realizing I have no idea how to attach an element on the right of its container, with the container still taking into account the dimensions of said element. Is it possible?
You're doing fine, you just need a clearing element before you close your container in order to make the floated elements "occupy" the parent's space. Something like this should work:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
<div class="clear"></div>
</div>
CSS
.clear {clear: both;}
In case of images, you can use the traditional html align="right" tag to put the image on right side of the content and keep the other aspects of styling the same.
The align="right" tag goes in the IMG html element.
Given this CSS:
.logo {
float: right;
}
… you can get the div to grow by adding this CSS:
#bannerLogin {
overflow: hidden;
}
That's due to the fact that an overflow with a value different from visible creates a new block formatting context.
Snippet
#bannerLogin {
background: #fed;
border: 1px solid black;
overflow: hidden;
}
.logo {
float: right;
}
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="http://placehold.it/100x100" style="border:none;">
</a>
</div>
I have div which includes:
<div class="field-content">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
In some cases this field-content has not img-tag at all. Then I want tile_content to be vertically centered to field-content.
When img-tag exists then image is positioned at top of field-content and tile_content is under image.
This demonstrates those two situations. In first one there is image and under image tile_content. In second one there is only tile_content - no img at all.
Any ideas/tips how to make this work?
My CSS:
.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;
.tile_content {
}
The only Thing you Need to know is vertical centering of div. This Problem is already solved here:
How to vertically center a div for all browsers?
You can add class has-image to .field-content do you can define own Styles for block with Image and without it. For example:
<div class="field-content has-image">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
So your CSS Looks like
.field-content.has-image {
}
If I got your question correct, then simply,
Put that img tag inside a div, give that div the same height as that you have given for image, so, it won't matter if the image is inside that div or not. it will always appear as a block, so won't collapse
OK, first time, I took it other way, I thought there are 3 divs, Sorry for that.
Here is the fiddle link:
enter code here
http://jsfiddle.net/happy2deepak/6U3kw/1/
When I use the following code, the last div overlaps the floated content:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>
The common fix is to do this:
<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>
However, in my case, I cannot add in an extra element. Is there another workaround for this?
Edit:
clear:both; fixed the overlapping issue, but there's a margin on the last div, so it's something like this:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>
And now the new problem is that the margin isn't showing up.
You could simply clear the floats...
<div style="background:red;clear: both;">test</div>
Try the following:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>
EDIT. To get the margin-top, add margin bottom to the floated elements
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>
Set the clear property on your last <div> to left or both:
<div style="background: red; clear: left;">test</div>
Edit: As for the margin, you can do some relative positioning:
<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>
There's no need to use floats here. Make the first two elements inline-block elements, and the third element a block-level element.
HTML:
<div class="inline-block">
Test
</div><div class="inline-block">
Test
</div>
<div class="block">Test</div>
Note that </div><div class="inline-block"> are touching. Because these two element are inline-block elements, any space in the markup will produce space in the presentation.
CSS:
.inline-block {
width: 50%;
display: inline-block; }
.block { margin: 50px 0 0; }
Preview: http://jsfiddle.net/Wexcode/eGPWt/