CODEWITHSUNDEEP
htmlcsscss-float
Greg
Greg

Reputation: 3063

DIV positioning issue when resizing web browser window

As you can see on the picture below and on this JSFiddle http://jsfiddle.net/w2Njv/, my issue is that my text won't stay aligned to the right of the picture and at the same level when I reduce the width of my webbrowser window. It actually moves below the picture.

I don't understand why because .pt-intro-text has a width of 60% no matter what the size of the screen is so to me it should always look good as on the first picture and never move below the picture. Thanks for your help

Looks OK with wide width:

enter image description here

Looks bas when resizing window (text won't stick to the right of the picture): enter image description here

http://jsfiddle.net/w2Njv/

HTML

<div class="wrapper">
    <section class="intro-personal-training clearfix">
      <div class="pt-intro-header clearfix">
        <h2 class="_text">Nous fdfds en place&nbsp;un&nbsp;dfdsfdsfds&nbsp;qui vous dfds</h2>
        <h3 class="_text">dfsf soit votredfdsd dfds</h3>
      </div>
      <div class="intro-pic-container"></div>
      <div class="pt-intro-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..&nbsp;</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
    </section>
</div>

CSS:

section {
  position: relative;
}
.wrapper {
  width: 90%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  background-color: rgb(255, 255, 255);
}
.intro-personal-training img {
  float: left;
  clear: both;
  width: 120px;
  margin-top: 21px;
  margin-left: 75.02759%;
}

.pt-intro-header h3 {
  margin-top: 3px;
  font-size: 26px;
  color: #3a7cdb;
}

.pt-types-de-coaching-header h3,
.restons-en-contact h3 {
  max-width: 700px;
  font-size: 18px;
  color: rgb(45, 125, 223);
}

.intro-personal-training {
  margin-top: 70px;
  margin-right: auto;
  margin-left: auto;
}

.intro-pic-container {
  float: left;
  clear: both;
  width: 329px;
  height: 262px;
  margin-top: 59px;
  margin-left: 2.88%;
  background-image: url('http://lorempixel.com/output/fashion-q-g-329-262-5.jpg');
  background-repeat: no-repeat;
  background-size: auto auto;
  background-position: center center;
}

.pt-intro-text {
  display: inline-block;
  float: right;
  width: 60%;
  margin-top: 59px;
  margin-right: 4.6671699999%;
  padding-left: 15px;
  border-left-width: 1px;
  border-left-color: rgb(0, 0, 0);
  border-left-style: dotted;
  text-align: justify;
  letter-spacing: 1px;
  color: #1a1a1a;
}

._text {
  margin-right: auto;
  margin-left: auto;
}

Upvotes: 1

Views: 90

Answers (2)

Sniper
Sniper

Reputation: 108

.pt-intro-text has a width of 60%, but .intro-pic-container has in small resolution more than 40% and then text won't stay aligned to the right.

Put img element into this div and give him max width 40% (or 37% width + 3% margin).

.intro-pic-container {
  float: left;
  width: 329px;
    max-width:37%;
  height: auto;
  margin-top: 59px;
  margin-left: 2.88%;
}

.intro-pic-container img{
    width: 100%;
}

And element .pt-intro-text must have 60% width (or width + margin + padding = 60%).

If you want responsive design dont use size (width, margin and padding) in pixels only percentage.

Fiddle: http://jsfiddle.net/w2Njv/10/

PS: Sorry for my bad english

Upvotes: 2

Alfonso Embid-Desmet
Alfonso Embid-Desmet

Reputation: 3622

Actually, if you set up the pt-intro-text div with a float:left it would more "responsive" as it allows for a nicer view when seen on a smaller device for instance.

if you really want to avoid that behaviour, use a fixed min-width like:

.wrapper{ min-width: 1100px; ... }

See http://jsfiddle.net/zHVHL/1/

Upvotes: 0

Related Questions