CODEWITHSUNDEEP
htmlcss
user3619057
user3619057

Reputation: 405

How to center one div and have another div float left to it?

This is what i have now and it works pretty well until you zoom in - https://jsfiddle.net/6mjrjayh/1/

HTML

<div id="box1">
<p><strong>About me</strong></p>
<img src ="images/hack.jpg"/>
<p><strong>Image Courtesy Bob Marley</strong><br></br>
<a href="www.google.com">www.google.com</a></p>
</div>

<div id="box2">
<p>
Hi there!
<br></br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
<br><br><br>
</p>
</div>

CSS

#box1 {
  float: left;
  position:absolute;
  padding-left:50px;
}

#box2 {
    width: 20em;
    margin: 0 auto 1em auto;
}

I want it so when u zoom in/out box1 keeps its exact position relative to box2 like it is now without zooming. Sorry if i'm not explaining it right but Riot Zeast Captain nearly has got it the way i want except box2 changes its position while box1 retains it whereas i want it the other way around when i zoom in/out of the page.

Upvotes: 1

Views: 102

Answers (3)

Gaurav Mahindra
Gaurav Mahindra

Reputation: 432

Try this :-

  

 #box1 {
  float: left;
  position:absolute;
  padding-left:50px;
}

#box2 {
    position: absolute;
    padding-top: 160px;
    text-align: center;
    width: 20em;
    margin: 0 auto 1em auto;
}
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    </head>
    <body>
        <div id="box1">
<p><strong>About me</strong></p>
<img src ="images/hack.jpg"/>
<p><strong>Image Courtesy Bob Marley</strong><br></br>
<a href="www.google.com">www.google.com</a></p>
</div>

<div id="box2">
<p>
Hi there!
<br></br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
I'm bob, a freelance designer and developer<br>
<br><br><br>
</p>
</div>
    </body>
</html>

Let me know if it does not work.

Upvotes: 1

Riot Zeast Captain
Riot Zeast Captain

Reputation: 968

.boxes{
  width: 90vw;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  display: inline-block;
}
#box1{
  width: 300px;
  border: 1px solid #ccc;
  margin: 5px;
  float: left;
  margin-left: calc(100vw / 4);
}
#box2{
  float: left;
  border: 1px solid #ccc;
  margin: 5px;
}
<div class="boxes">
  <div id="box1">
    <p><strong>About me</strong></p>
    <img src ="images/hack.jpg"/>
    <p><strong>Image Courtesy Bob Marley</strong><br><br>
      <a href="www.google.com">www.google.com</a></p>
  </div>

  <div id="box2">
    <p>
      Hi there!
      <br><br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      I'm bob, a freelance designer and developer<br>
      <br><br><br>
    </p>
  </div>
</div>

Here's the working code as your required output, but its not responsive. Fiddle link

Upvotes: 1

Farhad
Farhad

Reputation: 4181

I added position:fixed; and z-index:99; to your code. Are you looking for this ?

#box1 {
  float: left;
  position:fixed;
  display:inline-block;
  padding-left:50px;
  border:solid 1px red;
  background-color:red;
  z-index:99;
}

#box2 {
    width: 20em;
    height:500px;
    margin: 0 auto 1em auto;
    border:solid 1px blue;
}
<div id="box1">
  <p><strong>About me</strong></p>
  <img src ="images/hack.jpg"/>
  <p><strong>Image Courtesy Bob Marley</strong>
  <a href="www.google.com">www.google.com</a></p>
</div>

<div id="box2">
  <p>
  Hi there!
  <br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  I'm bob, a freelance designer and developer<br>
  <br><br><br>
  </p>
</div>

Upvotes: 0

Related Questions