Preventing divs with images from wrapping oddly in LIs - html

How may I prevent this odd cascading effect when using LI content such as the following:
http://jsfiddle.net/arPzt/1/
I can achieve the desired behavior by inserting BRs after each LI, but a) the vertical spacing between LIs seem to vary depending on the length of the content and b) there must be some better / more proper way of achieving this.
<ul>
<li>
<div style="background-color: #990000; width:70px; float: left">
<img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
</div>
<div style="background-color: #00FF00; margin-left: 70px;" >
body some interesting large amount of content. some interesting large amount of content.
</div>
</li>
<li>
<div style="background-color: #990000; width:70px; float: left">
<img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
</div>
<div style="background-color: #00FF00; margin-left: 70px;" >
body some interesting large amount of content. some interesting large amount of content.
</div>
</li>
<li>
<div style="background-color: #990000; width:70px; float: left">
<img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
</div>
<div style="background-color: #00FF00; margin-left: 70px;" >
body some interesting large amount of content. some interesting large amount of content.
</div>
</li>
</ul>

You're floating the elements, but if you want them to clear the previous line, you need to use clear: left or clear: both if you ever use right floated elements.
li {
clear: left;
}
jsFiddle: http://jsfiddle.net/arPzt/3/

I would suggest that as an alternative to the clear:left suggestions, you consider using overflow:hidden on the li elements instead.
While clear:left fixes this simple example, you could still have layout issues with any additional content following the list. Using overflow:hidden on the li elements will restrict any floating effects to just those items.
More information in this article.

I believe what you need to do is simply clear the 'float' after each LI
Like this:
<li style="clear:both;">

Related

<a> links simply not working/not clickable

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;
}`

Creating a specific, responsive layout with floated images

I have been trying to create a specific layout for some images. Layout I would like to create.
I have tried floating the smaller images so that they stand alongside the large image, this works if I add a clearfix but then for some reason the width I apply to the images is no longer effective. So it's either large images in the right positioning or small images all over the place.
I tried putting all images into separate div tags and then a parent div, then floating but that has it's own issues.
Can this be done in HTML & CSS or do I need to be going down the jQuery route?
I will be tidying the code up, I'm just trying to get it right in my head atm.
HTML:
<section id="galleryposition">
<ul id="gallery">
<div id="mainimage">
<li>
<a href="img/8.jpg">
<img src="img/8.jpg" alt=""></a>
</li>
</div>
<div id="smallphotos">
<div id="smalllefttop">
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
</a>
</li>
</div>
<div id="smallrighttop">
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt="">
</a>
</li>
</div>
<div id="smallleftbottom">
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt="">
</a>
</li>
</div>
<div id="smallrightbottom">
<li>
<a href="img/5.jpg">
<img src="img/5.jpg" alt="">
</a>
</li>
</div>
</div>
</ul>
</section>
CSS:
#gallery {
margin: 50px 0 0 0;
padding: 0;
list-style: none;
}
#galleryposition {
text-align: center;
}
#gallery img {
border-radius: 2.5%;
}
#gallery li {
float: left;
margin: .5%;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
#smalllefttop group {
max-width:50%;
float:left;
}
#smallrighttop group{
max-width: 50%;
float:right;
}
#smallleftbottom group{
min-width:50%;
float:left;
}
#smallrightbottom group{
min-width:50%;
float:right;
}
https://jsfiddle.net/apdeng/wyvzmm9q/1/
Thanks in advance.
Ok, so I started to play around with your code, but I was basically just re-starting it for you, which isn't what SO is for, so here are some things you need to consider:
<ul> tags are intended for lists. This definition is often stretched by developers who use them to create a "list" of links used for navigation, but in this case your image layout is complicated by the use of the <ul> and <li> structure. You'd be better served by simple <div> tags, which a) don't require both the <ul> and <li> tags and b) make more sense semantically since this is not, in fact, a list.
It's bad practice to put a <div> inside a <ul> like your #mainimage div.
The selector group in your css isn't actually doing anything. I googled this because I've never seen it before and couldn't come up with what purpose that keyword would serve. The elements followed by "group" aren't getting the styles you're trying to apply to them. I would remove that from your css.
You'll have more success with just plain old width in your css (not max-width)
Never use <br> tags to create space in a layout. Use margins and padding instead.
Make sure all your tags are closed and opened. When JSfiddle highlights the text red, that means you're missing part of a tag. (In your case, you have one too many </a> tags in each group.)
What you basically need to do is clean up your markup as much as you can and make that big image roughly 50% width and each of the other images roughly 25%. I say roughly because when you go to add margin between all of them, your total width will still need to add up to 100% (any more than that and some of your elements will bump down to the next line). That's probably what went wrong when you tried adding width to your images. Look at selectors for nth-child or last-child to help you remove the margin on the blocks on the side.
Let me know if you have more questions!

equally dividing columns doesnt work without commenting out returns, is there a better way?

I tried around a bit because i didnt understand what causes the blank spaces between equally divided columns, http://jsfiddle.net/esvNe/ helped me but it took a while until i noticed the comments,
<div id="wrapper">
<div id="c1" style="background:red"></div><!--
--><div id="c2" style="background:blue"></div><!--
--><div id="c3" style="background:yellow"></div>
</div>
and this is me with a one line solution, ugly!
http://jsfiddle.net/qFm8U/
Is there a better way to do this?
(that is, dividing a div into equal parts without padding/margin hacks or one-line/comment stuff)
It's the inline-block that's creating the white-space between the divs: As the attribute's name suggests, it works a bit like inline, which means it will take spaces and line-breaks into "consideration", so to speak. (Hope that made sense.) Try using display: block; and float: left; like this:
div div {
height: 50px;
background-color: green;
width: 32.666%;
display: block;
float: left;
}
Notice the width is a bit less than a third - that's to account for the margin between the three blocks. Now we add a class to the two left divs:
<div id="wrapper">
<div id="c1" class="left" style="background: red;"></div>
<div id="c2" class="left" style="background: blue;"></div>
<div id="c3" style="background:yellow"></div>
</div>
And last, some more CSS to add the padding between the divs:
div .left {
margin-right: 1%;
}
Here's a fiddle: http://jsfiddle.net/Niffler/g2fBQ/

float: right - Why below container?

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

Split <li> into two column

<ul>
<li>
<div class="ext-left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div class="ext-right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
</li>
...
</ul>
I'd like to split the each list element into two part(in the same line), in the left is an image, in the right is a link and a text(they should be in two lines).
I tried to use float left on ext-left but it doen't work.
Play with jsfiddle: http://jsfiddle.net/UeThn/1/
This is the correct version: http://jsfiddle.net/UeThn/10/
Add this CSS:
.ext-left{
float:left;
}
li{
clear:both;
}
New fiddle here
Here is what you do
<ul>
<li style="width:150px">
<div style="width:100px;float:left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div style="width:50px;float:right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
<br clear="both"/>
</li>
The idea is as follows:
1. give the 'li' a width
2. give both div's a width
3. float left and right respectively
4. Add a beak with clear="both" at the end
How about this:
li > div{
display: inline-block;
}
[JSFiddle]
(But evil browsers won't support that, see info here)
Floating left seemd to work. Think you've done something wrong.
http://jsfiddle.net/UXnVJ/
You just need to give each div a set width - otherwise, they think they should be 100% wide, which doesn't allow the next to float next to it. See fiddle-fix here.
Try this:
li {
clear: left;
}
.ext-left {
float: left;
}
Float both divs to the left
.ext-left, .ext-right{
float: left;
}
li {
clear: both;
}