CODEWITHSUNDEEP
htmlcsslayout
John Smith
John Smith

Reputation: 397

How can I do this layout?

I have this sample:

link

CODE HTML:

<div class="container">
    <div class="image-container">
      <img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
    </div>
    <div class="desc">
      details
    </div>   
</div>

CODE CSS:

body{
  background:black;
}
.container{
  background:#f3f4f6;
  border-bottom:5px solid #db5207;
}
.image-container,.desc{
   display:inline-block;
  vertical-align:top;
}
.desc{
  background:red;
}
img{
  width:612px;
  height:412px;
  border:10px solid white
}

I put an image to better understand what they want to do

enter image description here

basically I want the image to be over container and divul "desc" to be by end.

You can help me solve this problem? What is the best way to do this?

Thank you in advance!

Upvotes: 1

Views: 57

Answers (4)

s.preethiv renold
s.preethiv renold

Reputation: 11

Try this here code it may be solve your problem

 *{margin:0;padding:0;}
.container{margin:100px 0;height:200px;border:5px solid red;position:relative;}
.image-container{height:300px;width:30%;border:5px solid blue;position:absolute;right:55%;top:-30%;}
.image-container img{height:300px;width:100%;}
.desc-container{height:190px;width:50%;border:5px solid green;float:right;}
<div class="container">
    <div class="image-container">
      <img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
    </div>
    <div class="desc-container">
      details
    </div>   
</div>

Upvotes: 1

Ayaz
Ayaz

Reputation: 171

Please check the following if it satisfies your requirement:

<!DOCTYPE html>
<html>
<head>
    <title>Solution</title>

    <style type="text/css">

        #container {
            background-color: #DCDCDC;
            position: relative;
            left: 100px;
            top: 100px;
            width: 800px;
            height: 200px;
            padding: 5px;
        }

        #image {
            background-color: #F0E68C;
            width: 200px;
            height: 255px;
            position: relative;
            left: 150px;
            top: -80px;
        }

        #details {
            background-color: #FF7F50;
            position: relative;
            width: 400px;
            left: 380px;
            top: -310px;
            height: 190px;
        }

        h2 {
            margin-top: 5px;
            margin-left: 5px;
        }
    </style>
</head>
<body>

    <div id="container">
            <h2>container</h2>
        <div id="image">
            <h2>image</h2>
        </div>

        <div id="details">
            <h2>details</h2>
        </div>

    </div>


</body>
</html>

Upvotes: 0

pradeep
pradeep

Reputation: 1

please check below code:

just need to change in css:

body{
  background:black;
}
.container{
  background:#f3f4f6;
  border-bottom:5px solid #db5207;

  margin-top: 50px;
  height: 380px

}
.image-container,.desc{
   display:inline-block;
  vertical-align:top;

}
.desc{
  background:red;
  min-height: 380px;

  display: inline-block;

}
img{
  width:612px;
  height:412px;
  border:10px solid white;
  position: relative;
  top:-20px;
}

Upvotes: 0

Sasikumar
Sasikumar

Reputation: 863

Check the following code for your answer. Also you can verify the codepen https://codepen.io/sasikumarhx/pen/VKmQod

HTML:

<div class="container">
  <div class="left">
    <div class="image-container">
      <img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
    </div>
  </div>
  <div class="right">
    <div class="desc">
      details
    </div>   
  </div>
</div>

CSS:

body{
  background:black;
}
.container{
  background:#f3f4f6;
  border:5px solid #db5207;
  height:250px;

}
.right{
  float:right;
  width:49%;
}
.left{
  float:left;
  width:49%;
}
.image-container{
}
.desc{
  background:red;
}
img{
  width:50%;
  height:130%;
  border:10px solid white;
  float:right;
}

Upvotes: 0

Related Questions