I want to putting the class of ‘ B ‘ besides the class of ‘A’.Just using floating!

@deathshadowOct 29.2014 — #The A's are goiong to stack -- you want them AB AB AB you need to code them AB AB AB not AAA BBB... You also have a float left AFTER them, which means they won't start floating until AFTER A. I assume you want B on the left and A on the right?

Really can't make much sense of this though -- those massive left margins just scream "how is any of this even supposed to be next to each-other" and/or counterintuitive navigation. Just what are you trying to do with this?

@deathshadowOct 29.2014 — #... and really if you are declaring a bunch of same properties on different elements, nest their selectors to keep the code tidy -- this is an aspect of CSS that I think the LESS and SASS whackjobs seem to miss.

.A, 
 .B {
 float:left;
 width:468px;
 height:60px;
 margin:0 0 800px 10px;
 }
 
 .A {
 clear:both;
 }

Only declare what's different, not what's the same.

The above assumes you actually have that crazy 800px margin for some reason we're not seeing. This also assumes you want them:

A B

A B

A B

In which case the markup would be:

&lt;img src="image.jpg" class="A"/&gt;
 &lt;img src="image.jpg" class="B"/&gt;
 &lt;img src="image.jpg" class="A"/&gt;
 &lt;img src="image.jpg" class="B"/&gt;
 &lt;img src="image.jpg" class="A"/&gt;
 &lt;img src="image.jpg" class="B"/&gt;

IF you want them B A B A, swap the float:left for float:right;

IF you INSIST on that existing code order and only one float, with B before A on screen but after A in the markup, you'll need a DIV or two:

&lt;div class="a"&gt;
 &lt;img src="image.jpg" /&gt;
 &lt;img src="image.jpg" /&gt;
 &lt;img src="image.jpg" /&gt;
 &lt;/div&gt;
 &lt;div class="b"&gt;
 &lt;img src="image.jpg" /&gt;
 &lt;img src="image.jpg" /&gt;
 &lt;img src="image.jpg" /&gt;
 &lt;/div&gt;

The CSS for that being:

.A img,
 .B img {
 display:block;
 width:468px;
 height:60px;
 }
 
 .A,
 .B {
 margin:0 0 10px 800px;
 }
 
 .A {
 float:left;
 }
 
 .B {
 overflow:hidden;
 zoom:1;
 }

The float + overflow method is one of the better ways of handling two column float layouts as you dodge the "perfect width" but.

Again, NOT that 2400px total width thanks to those ridiculous margins is going to be a functional design. REALLY wonder what you are thinking with that.

I want to putting the class of ‘ B ‘ besides the class of ‘A’.Just using floating!

3 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

I want to putting the class of ‘ B ‘ besides the class of ‘A’.Just using floating!

3 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #HTML _↴