html - responsive 3 div side by side with image -
Div inside div and div div inside DIV. Trying to leave the float, but not working
For a quick overview
here is the CSS:
For a quick overview
here is the CSS:
. Container {Clear: Both; Padding: 0 pixels; Margin: 0 px; Hidden flurry; } .profile1 {background-color: #ccf; } .profile2 {background-color: #cfc; } .profile3 {background color: # FCC; } @ Media only screen and (minimum-width: 480px) {.span_1_of_3 {width: 32.2%; } .col {display: block; Swim left; Margin: 1% 0 1% 1.6%; } .col .: First-child {margin-left: 0; }}
HTML:
& lt; Div class = "container" style = "border: 2px solid black;" & Gt; & Lt; Div class = "col span_1_of_3 profile1" & gt; & Lt; Img src = "http://placehold.it/100x100" /> Advertisement for the website & lt; / Div & gt; & Lt; Div class = "col span_1_of_3 profile2" & gt; & Lt; Img src = "http://placehold.it/100x100" /> Advertisement for the website & lt; / Div & gt; & Lt; Div class = "col span_1_of_3 profile3" & gt; & Lt; Img src = "http://placehold.it/100x100" /> Advertisement for the website & lt; / Div & gt; & Lt; / Div & gt;
Image floating on the right looks okay:.
.col & gt; IMG {float: left; }
Comments
Post a Comment