Wed, 2015-07-22 10:06
Hi, I need some help and I hope the solution is simple for professionals.
The task is distribution of some layers inside the container.
The trouble is that the border between first right .pic_text is bigger than between first left .pic_text. The container .center is centered, but its content doesn't have equal margins.
I tried to find the solution, but couldn't find it ( for my case.
The matter is that every .pic_text has to have picture and text and the design has to be adaptive.
Here is my code CSS3:
<style> .center { width: 95%; height: auto; padding: 10px; margin: auto; } .pic_text { background-color: #ccc; padding: 5px; float: left; width: 400px; margin-left: 2px; margin-bottom: 30px; } .clear { clear: left; } </style>
AND HTML:
<div class="center"> <div class="pic_text"> <p>HEADER 1</p> <img src="DSC_2245.jpg" width="400" height="250" alt=""/> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> </div> <div class="pic_text"> <p>HEADER 1</p> <img src="DSC_2245.jpg" width="400" height="250" alt=""/> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </p> </div> <div class="pic_text"> <p>HEADER 1</p> <img src="DSC_2245.jpg" width="400" height="250" alt=""/> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> </div> <div class="pic_text"> <p>HEADER 1</p> <img src="DSC_2245.jpg" width="400" height="250" alt=""/> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </p> </div> <p> </p> <div class="clear"></div>
Wed, 2015-07-22 19:47
#1
Try setting the box-sizing to
Try setting the box-sizing to border-box or using a different display value eg inline-block instead of float.
Fri, 2015-07-24 11:13
#2
Hi, thank You for feedback,
Hi, thank You for feedback, but can I get some examples?
I've grab some code from internet pages, but they don't work with my pictures well. Too much bugs if I change the size of web-browser. The size of my picture is fixed - 400x250 px. My example works perfectly, if we will not get into account the bugs with center position.
I tried to add display: inline-block; but nothing changed. 
Wed, 2015-07-29 13:56
#3
You should be really using a css framework
Hi there,
You would find it much easier to do this if you would be using some of the css frameworks out there like http://getbootstrap.com .
However code below should get you in right direction.
I removed width attribute from image tags and amended all width attributes in css to be max-width not width.
I also added display: inline-flex; to .center class.
I would suggest you to not use adaptive design but responsive. Why you ask, see following link for answer: http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .center { width: 95%; height: auto; padding: 10px; margin: auto; display: inline-flex; } img { max-width: 100%; } .pic_text { background-color: #ccc; padding: 5px; float: left; max-width: 400px; margin-left: 2px; margin-bottom: 30px; } .clear { clear: left; } </style> <style type="text/css"></style></head> <body> <div class="center" style=" "> <div class="pic_text"> <p>HEADER 1</p> <img src="http://placehold.it/400x250" alt=""> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> </div> <div class="pic_text"> <p>HEADER 1</p> <img src="http://placehold.it/400x250" alt=""> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </p> </div> <div class="pic_text"> <p>HEADER 1</p> <img src="http://placehold.it/400x250" alt=""> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> </div> <div class="pic_text"> <p>HEADER 1</p> <img src="http://placehold.it/400x250" alt=""> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </p> </div> <p> </p> <div class="clear"></div> </div></body></html>