<div class="pull_down">
<ul class="zvuc">
<li class="prod">
<div class="conutine">
<div class="prod_name">Asus 15.6-Inch Versati...</div>
<img src="../images/test/lotr.jpg">
<div class="timer"></div>
</div>
</li>
</ul>
</div>
CSS:
div.pull_down
{
padding: 20px 20px 20px 30px;
}
li.prod
{
background: url("../images/test/bg-horizontal.png") no-repeat;
height: 286px;
width: 170px;
text-align: center;
padding-top: 0;
display: list-item;
width: 170px;
min-height: 286px;
float: left;
}
ul
{
list-style: none outside none;
margin: 0;
padding: 0;
text-align: left;
}
When i mouse over the division with firebug, it doesn't contain anything. Why is this?
Your are floating your LI's so you most likely need a "clearfix" on the parent DIV.
A "clearfix" will force an element to self-clear it's children.
http://css-tricks.com/snippets/css/clear-fix/
Demo: http://jsfiddle.net/wdm954/Dxkpx/
You can just add the .group classes to your CSS file and add class="group" to any parent that you need to clearfix.
This is a semantic and scale-able solution. You should avoid adding empty DIVs to your markup or extra CSS to parents (such as floats). That can produce undesirable results and become confusing in the long run.
Hi you need to add <div style="clear:both"></div> after the </ul> to close the float
or to add float: left; to the class .div.pull_down
Related
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
I am running into an issue centering my ul element within my div. I used the margin: 0 auto technique, but it isn't working in this scenario. In addition, I always had a question related to whether setting the width to a ul element within a div was necessary to use the margin: 0 auto is there a way around this?
html:
<div class="col-3-12">
<div class="sidebar-personal-information">
<div id="sidebar-social-media">
<ul id="sidebar-social-media-list">
<li><img class="sidebar-social-media-icons" src="images/linkedin.png"></li>
<li><img class="sidebar-social-media-icons" src="images/twitter.png"></li>
</ul>
</div>
</div>
</div>
css:
.sidebar-personal-information {
background-color: #00a8df;
}
#sidebar-social-media {
margin: 0 auto;
padding: 10px;
vertical-align: center;
}
ul#sidebar-social-media-list{
width: 100%;
margin: 0 auto;
}
#sidebar-social-media ul li {
display: inline;
}
Take a look at this Fiddle
By adding text-align: centerto #sidebar-social-media in your CSS the problem should be solved.
Credits go to Vitorino Fernandes, I would like to comment but I don't have enough reputation.
I think I'm going insane over this now, no idea how to resolve it... please help guys.
I have three divs on a page that should all fit onto one line. They have to be square (with rounded corners) so I have to set a width and a height to keep the 1:1 aspect ratio. I have a heading inside them that should be vertically and horizontally centered. The wording of the heading may change and might run over 2 lines so a simple margin-top is not enough in this case.
First problem: there are weird margins at the top despite there not being anything else affecting that (well there must be but I can't see what). If I float the divs they line up but floating isn't the way to go is it... why is inline-block not working?
Second issue (which is likely related, so I'm posting it in one go) is that I'm unable to vertically center the title divs. Any ideas?
Here's a jsfiddle to illustrate: http://jsfiddle.net/fydC4/
The HTML:
<div id="container">
<div class="nav-left">
<p id="nav-left-title">In this section…</p>
<ul>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
</ul>
</div>
<div id="main">
<h1>Assignments</h1>
<p>Click on the titles of the assignments to find out more.</p>
<div class="box" id="good-designs">
<h2 class="box">3 good designs</h2>
</div>
<div class="box" id="temp">
<h2 class="box">title here</h2>
</div>
<div class="box" id="temp2">
<h2 class="box">title here</h2>
</div>
</div><!--end main-->
</div>
</div><!--end container-->
The CSS:
#container {
max-width: 960px;
margin: auto;
}
#main {
display: table-cell;
width: 73em;
padding: 1em 2em 2em;
background-color: white;
}
#nav-left-title {
padding-bottom: 0.5em;
margin: 0;
color: white;
}
.nav-left{
display: table-cell;
width: 14em;
background-color: #87a8b1;
padding: 1.1em;
font-size: 1.2em;
}
.nav-left li {
padding: 0.5em 0;
border-bottom: 1px solid white;
}
h2.box {
padding: 15px 0;
margin: 50% 15px;
margin: auto;
text-transform: uppercase;
text-align: center;
}
div.box {
padding: 15px;
height: 180px;
width: 180px;
border-radius: 50%;
margin-top: 25px;
margin-left: 1.5em;
display:inline-block;
/* float: left; */
}
#good-designs {
background-color: green;
}
#temp, #temp2 {
background-color: yellow;
}
Hi you may use two properties to align all your elements
vertical-align:middle;
display:inline-table on div.box and
display:table-cell on h2.box; (for the texts inside your divs)
Check this code http://jsfiddle.net/fydC4/16/
This worked for me, replace inline-block with float left.
you are also calling margins twice on some element which are not necessary
here you go
jsfiddle.net/fydC4/14
when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />
When inspecting my elements, i noticed my height on the first li is very low.
I'm trying to add a background to the whole li after selecting the "city (2)".
The background fills only City(2) an half of New York. I tried without floating, but then i can't get them lined up.
I've added 2 photos. One where i have floating, and one without.
<ul class="specs">
<li>
<div class="trigger">› City (2)</div>
<div class="cityByLocation">
<ul>
<li class="cityInfo">
<div class="cityName" style="float: left;">
› New York
</div>
<div class="cityDistance" style="float: left;">
430 miles
</div>
<div class="btn-take"></div>
</li>
<li class="cityInfo">
<div class="cityName" style="float: left;">
› Chicago
</div>
<div class="cityDistance" style="float: left;">
430 miles
</div>
<div class="btn-take"></div>
</li>
</ul>
</div>
</li>
<ul>
css:
.cityName{
float: left;
width: 45%;
}
.cityDistance {
float: left;
width: 20%;
}
.specs {
padding: 0;
}
.specs li {
padding: 0;
padding-top: 10px;
list-style: none;
}
.specs ul {
list-style: none;
padding: 0;
}
You need to clear your floats as Eric said. The simplest way to achieve that is by applying overflow: hidden to the container, so:
.cityByLocation {
overflow: hidden;
}
http://jsfiddle.net/a3GLG/
I think this will solve your problem.
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
You can use 2 methods to fix it:
{clear:both} or .clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
source
You can also fix it by setting overflow: hidden to li element. It will clear and auto calculate height.
-- update --
thanks #mickmackusa
https://jsfiddle.net/e94pzbbn/1/