The problem with incomprehensible indent element

Question

It is not clear why the element on the right has a margin and does not allow the text to fall into place (in theory).

 .icons { display: block; width: 104px; height: 92px; margin-top: 20px; margin-left: 5%; text-align: center; border-radius: 2px; background-color: rgb(251, 251, 251); box-shadow: 0px 0px 1px 0px rgba(20, 20, 21, 0.14); } .serviceContent{ width: 35%; height: 50%; display: none; float: right; } .serviceImage{ width: 35%; float: right; right: 0px; top: 20px; } .miniMenu{ width: 65%; float: left; }

 <div class="miniMenu"> <div tabindex="0" class="icons" id="diagramm"> <img src="img\service\diagramm.png" alt="diagramm"> </div> <div tabindex="0" class="icons" id="tech"> <img src="img\service\tech.png" alt="tech"> </div> <div tabindex="0" class="icons" id="loope"> <img src="img\service\loope.png" alt="loope"> </div> <div tabindex="0" class="icons" id="circle"> <img src="img\service\diagramm.png" alt="circle"> </div> <div class="serviceContent" id="diagrammText"> <p class="text" id="head">1Modern App Design</p> <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> </div> <div class="serviceContent" id="techText"> <p class="text" id="head">2Modern App Design</p> <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> </div> <div class="serviceContent" id="loopeText"> <p class="text" id="head">3Modern App Design</p> <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> </div> <div class="serviceContent" id="circleText"> <p class="text" id="head">4Modern App Design</p> <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> </div> </div> <div class="serviceImage"> <img src="img\apple-watch-mockup.png" alt=""> </div>

trouble

2. Explain with which element (through a selector or a clearer description of the problem)?
Yes, the clifix did. About what element - with the class .icons

Community spirit ♦ one · Accepted Answer · 2017-01-08T06:49:52

Blocks with the .icons class lie inside a floating block that is assigned 65% width. Therefore, to the right of them there is a lot of free space.

The .icons themselves are ordinary, non-floating blocks, and therefore occupy the entire width available to them.

Blocks with the class .serviceContent are floating again, but .icons push them down.

UPD. If the text blocks are shown and hidden by the script, then try putting all .serviceContent blocks .serviceContent front of all .icons .

UPD 2. To get by with styles , assign text blocks position: absolute; . For example: http://codepen.io/glebkema/pen/bgVbGb

 body { margin: 20px; } .icons { cursor: pointer; height: 92px; margin-bottom: 20px; width: 104px; } .icons img { border-bottom-left-radius: 42px; border-top-left-radius: 42px; } .serviceContent { display: none; position: absolute; bottom: 0; left: 124px; right: 20px; top: 0; } .serviceImage { width: 35%; float: right; } .serviceImage img { height: auto; width: 100%; } .miniMenu { float: left; position: relative; width: 65%; } #diagramm:focus ~ #diagrammText, #tech:focus ~ #techText, #loope:focus ~ #loopeText, #circle:focus ~ #circleText { display: block; }

 <div class="miniMenu"> <div tabindex="0" class="icons" id="diagramm"> <img src="//placehold.it/104x92/c69/fff?text=1" alt="diagramm"> </div> <div tabindex="1" class="icons" id="tech"> <img src="//placehold.it/104x92/69c/fff?text=2" alt="tech"> </div> <div tabindex="2" class="icons" id="loope"> <img src="//placehold.it/104x92/9c6/fff?text=3" alt="loope"> </div> <div tabindex="3" class="icons" id="circle"> <img src="//placehold.it/104x92/f93/fff?text=4" alt="circle"> </div> <div class="serviceContent" id="diagrammText"> <h2>1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> </div> <div class="serviceContent" id="techText"> <h2>2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> </div> <div class="serviceContent" id="loopeText"> <h2>3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> </div> <div class="serviceContent" id="circleText"> <h2>4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> </div> </div> <div class="serviceImage"> <img src="//placehold.it/480x640/999/fff?text=Service%20Image" alt=""> </div>

the trouble is that if I assign them a float, then they line up horizontally, not exactly what is needed)
Three floating columns will turn out: the switch pictures will remain on the left, descriptions of them will appear in the middle, the product picture on the right.
Or even easier - try putting all .serviceContent blocks .serviceContent front of all .icons .
I swapped places, but the text somehow disappeared, but it wasn’t a separate option ( ru.stackoverflow.com/questions/611679/… )

The problem with incomprehensible indent element

1 answer 1

More articles: