3 replies [Last post]
WindOfDestiny
WindOfDestiny's picture
Offline
newbie
Ukraine
Last seen: 4 years 16 weeks ago
Ukraine
Timezone: GMT+3
Joined: 2015-07-22
Posts: 2
Points: 3

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>&nbsp;</p>
  <div class="clear"></div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 1 hour ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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.

WindOfDestiny
WindOfDestiny's picture
Offline
newbie
Ukraine
Last seen: 4 years 16 weeks ago
Ukraine
Timezone: GMT+3
Joined: 2015-07-22
Posts: 2
Points: 3

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. Sad

jberzins802
jberzins802's picture
Offline
newbie
Last seen: 4 years 16 weeks ago
Timezone: GMT+3
Joined: 2015-07-29
Posts: 1
Points: 2

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>&nbsp;</p>
  <div class="clear"></div>
 
</div></body></html>