Div with "width: auto;" not auto-expanding & "display: inline;" not working on its own. Why is this happening?

Hi everyone,

Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ?
Also, why does my "display: inline;" not work?

You can see what I mean here:  http://www.jasonwangart2.blogspot.ca/

Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs.

Img responsive

i found the below code online to make images responsive :

.img-responsive {
   display: block;
   height: auto;
   max-width: 100%;
}

that means for every image tag , i can use the class img-responsive .

but than why has the author used

  display: block;

What purpose does that serve ??

display:flex;

Hello,
i have a problem with the css rule display: flex. Well to be honest, the problem is with the Mozilla FireFox browser. Every other browser displays the page as i intend it to display, but with firefox there´s a problem.
I have a container with the class of promo that holds tree colomns with the class of coluna.

The CSS is as folows:
.conteudo .promo {
max-width: 100%;
display:flex;
flex-flow:row wrap;
justify-content:center;
}
.conteudo .promo .coluna{
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
width: 30.3333%;
padding: 5px;

Menu Layout

Hello!

I want to style the Menu as a column and something is not working right.

I've changed the width, so that the items would line up as a column, but it doesn't work if I use small words.

http://www.emilykimballart.com/

You can see how Blog and Shop remains in the same line, and I want Shop on a separate line below Blog.

#access {padding:0; margin:0 0 0 -306px; clear:right; width:110px; display:table-cell; vertical-align: middle; line-height:22px; z-index:98;overflow:visible;}
#access .menu-header ul, 
div.menu ul{list-style:none; margin:0}

Difference between (display: block; float: left;) and display: inline; ?

I see many people use these two different techniques and I want to know which technique does what ? and what are the differences ? and which technique to use in which situation ?

Syndicate content