I have div.content that holds div.images which is left floated and next to it is a list with couple of items.
The problem is that li's apear over div.images element. I've tried to make list inline-block but in this case items that appear under the div.images are positioned next to the right edge of div.images.
http://jsfiddle.net/kmZ3X/
Any idea?
Try list-style-position: inside on the li elements.
For example: http://jsfiddle.net/mqchen/psJyh/
add
ul{
float: left
}
That should do it
this will make it appear below the images
css:
.content p, .content ul {clear:both}
<div class="content">
<img alt="Desert" src="images/Desert.jpg"/>
<p>sth.</p>
</div>
div.content img
{display: block;float: left; margin-right: 10px;border: solid 1px #999;padding: 5px; }
if you have a list instead of paragraph it will be same. if you have any problem you can ask me again. thank you.
Related
This fiddle shows my problem.
The output include only 2 yellow boxes, but there could be more. I want the boxes to display horizontally, not vertically as they now display. I have attempted to use display: inline-block to accomplish my goal, but to no avail. How can I get the boxes to display horizontally?
I was able to horiontally center the elements by adding float: left; to .sticky and removing display: inline-block:
.sticky {
float: left;
}
Use display:inline-block for the div with class="element" and remove <div class="reminders"> that you put just before the second <div class="element"
If you don't want to remove elements or make them float, add display: inline-block to both parents: .reminders, .element {display: inline-block}
add float: left to .sticky (and some margin left or/and right):
https://jsfiddle.net/Lcrysuzy/
The code below shows two links in the div with a small width.
<style>
div{
width: 89.5px;
border:1px solid #ddd;
}
a{
border:1px solid red;
display: inline;
margin-bottom:30px;
}
</style>
<div>
AAAAAAA
BBBBBBBB
</div>
Any ideas why margin-bottom:30px; doesn't work so that one button would be below another one for about 30px?
What's the best way to slightly modify this code so there is a gap between buttons?
And here is a jsFiddle if needed. Thank you.
Inline elements can't have margins.
If you need to add to link margin, you need to make this link block, or inline-block. You need the inline-block here.
a {display: inline-block}
When you set there block, margin will be apllied and link width will be 100% (or better, 100% - side margins - paddings - borders).
Note: you set display: inline, which do nothing in this case. Links are inline by default.
I see the issue and it is because you are using display:inline as opposed to display:block.
a{
border:1px solid red;
display: block;
margin-bottom:30px;
}
In this gallery the last image should float to the left but it is positioned in the middle. Whats wrong with the code?
This is the whole code CSS.
This is the whole code HTML.
HTML:
<div class="text-block7" >
<img src="gal/thumb/60.png" alt="">
</div>
CSS:
#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}
Before the 7th div block add:
<div style="clear:left"></div>
this happens because your 4th image is higher, so the 7th image when is floating to the left is slamming against that element.
to prevent this kind of behaviour just define a css rule that applies a clear:left on every 3n + 1 div involved: e.g.
div[class^="text-block"]:nth-child(3n + 1) {
clear: left;
}
Note: the nth-child pseudoclass unfortunately doesn't work on IE8, but if you need to absolutely support that browser you may simply use display: inline-block and vertical-align: top instead of floating elements
I have two divs, one nested in the other, i.e. the #messages div is inside the #mainContent div. The #messages div should be 0px from the top of its parent. Everything is fine until i put a unordered list inside it, then it pushes the whole div down from the whole #messages div down by a few pixels.
If i put margin-top:0px; on the ul element, everything is fine again, but i want the ul to be margin-top:10px; from it's #messages parent. If i put margin-top:10px; it again pushes #messages 10px from #mainContent.
Can someone please explain why this is happening, and can someone provide a clean solution for this?
Thank you, it's jsfiddle is:
http://jsfiddle.net/wtKuP/4/
"Can someone please explain why this is happening, and can someone provide a clean solution for this?"
The top margins of a block-level element and its first in-flow block-level child will always collapse. There are many ways to avoid this (read the above link for a complete list) - one is to just add overflow: hidden to the parent of the <ul> as this creates a new Block Formatting Context and prevents the standard margin collapsing behaviour.
http://jsfiddle.net/wtKuP/22/
From the 2.1 Spec, Section 8.3.1:
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
Put
margin:0;
padding:0;
on both divs. Then ul will have a 10px margin from messages div, but messages div will have no margin with maincontent.
Add ul:{margin:0;}. Better use eric myers reset.css which will remove browser inconsistence
Try this
JSFiddle updated with what you were asking for
<div id="mainContent">
<div id="messages">
<ul>
<li>Remove the UL and LI, and the #messages div will be 0px from the top of the parent div #mainContent. Why?</li>
</ul>
</div>
</div>
And then...
div#mainContent {
border:1px solid black;
position:absolute;
width:500px;
height:600px;
margin-top:50px;
margin-left:-250px;
left:50%;
}
#mainContent > #messages {
margin: 0;
width:499px;
height:525px;
background-color:red;
}
#messages ul {
display: inline-block;
margin-top: 10px;
}
I have a div called NAV and inside of NAV I have an UL with 5 li which I float to the left, the li's that is but when I do that the NAV collapses. I know this because I put a border around NAV to see if it collapses and it does. Here is the example.
collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png
no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png
as you can see in the first image, the links in the NAV div are floated left and that
black border ontop is the actual div called NAV.
in this image you can see how it has top and bottom border and it not collapsed.
here is some of the html and css I used.
alt text http://img301.imageshack.us/img301/5514/codejc8.png
#nav #ulListNavi a {
float: left;
}
Add any overflow value other than visible to your container:
div#nav { overflow:auto; }
Then add width to restore the width
div#nav { width: 100%; overflow:auto; }
One solution is to add a "clear:both" style to an element after the last floated anchor, for instance:
<div id="nav">
<ul id="ulListNavi">
<li>Home</li>
<li>Search</li>
<li>Flowers</li>
<li>My Account</li>
<li>Contact Us</li>
</ul>
<div style="clear:both;"></div>
</div>
This causes the containing element to clear all floating elements before closing the containing box.
A few other options for clearing floats here:
http://www.quirksmode.org/css/clearing.html
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
As to the best way of doing it, that's almost a holy war, the purists would freak about the extra div, if you are not fussed by a little extra markup, the addition of the cleared div as suggested by Joshua and AJ will work fine, and is a reliable technique, but there are at least 17 other ways of doing it...
add this code after your ul:
<div style="clear: both"></div>
Try floating the containing element to the left too.
Don't bother with clearing elements or overflow. Add this:
#nav {
float: left;
}
When you float the LI's, the #nav no longer "contains" anything so it collapses. But if the #nav is floated also, it contains anything floated inside it, so it expands again.
(Also consider removing the #nav div and just applying the same styles to the UL.)
Your problem is because you are floating the <A> elements, but each of them is inside an <LI> element. LIs display as blocks by default, so each <LI> is forcing it's child <A> to begin on a new line.
If you float the <LI>s, I think you'll solve your problem.
#nav #ulListNavi li {
float: left;
}
The quickest solution would be to add overflow:hidden to clear the float on the parent element:
#nav{overflow:hidden;}
Without changing your HTML:
#nav
{
width: 100%;
overflow: auto;
border: solid 1px red;
}
#ulListNavi
{
margin: 0;
padding: 0;
list-style: none;
}
#nav #ulListNavi li
{
float: left;
}
#nav #ulListNavi li a
{
margin-left: 5px;
}
Works in IE8 and FF 3.5