CODEWITHSUNDEEP
htmlposition
d3pd
d3pd

Reputation: 8315

How can I position three divs in a page?

I want the page to be split vertically, with one div on the right half of the page and the other two divs on the left half. How could I do this? My code is as follows:

<html>
<head>
<style type="text/css">
html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
div2v{
    width: 50%;
    height: 100%;
    float: left;
}
div4{
    width: 50%;
    height: 50%;
    float: left;
}
</style>
</head>
<body>

<div id="div4">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>
<div id="div4">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>
<div id="div2v">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 800px" name="internal"></iframe>
</div>

</body>
</html>

Is there a better way of arranging iframes on a page (without Javascript)?

Upvotes: 1

Views: 77

Answers (2)

Vishal G
Vishal G

Reputation: 1541

Modified your code :-) No need to set height in px I have made it responsive, you can review this solution 

<html>
<head>
<style type="text/css">
html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
#div2{
    width: 100%;
    height: 50%;
    float: left;
}
#div1{
    width: 50%;
    height: 100%;
    float: left;
}
#div3{
    width: 50%;
    height: 100%;
    float: right;
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">
    <iframe src="https://www.wikipedia.org/" style="width: 100%; height:  100%" name="internal"></iframe>
  </div>
  <div id="div2">
    <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 100%" name="internal"></iframe>
  </div>
</div>
<div id="div3">
  <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 100%" name="internal"></iframe>
</div>
</body>
</html>

Upvotes: 3

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You need to update your code to following

<html>
<head>
<style type="text/css">
html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
#div2v{
    width: 50%;
    height: 100%;
    float: left;
}
#div4{
    width: 50%;
    height: 50%;
    float: left;
}
</style>
</head>
<body>

<div id="div4">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>

<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>

<div id="div2v">
<iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>

</body>
</html>

Changes made

  1. Update css selector -> div2v to #div2v and div4 to #div4

  2. Update html from 

    <div id="div4">
  <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>
<div id="div4">
   <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>

to

<div id="div4">
    <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>

    <iframe src="https://www.wikipedia.org/" style="width: 100%; height: 400px" name="internal"></iframe>
</div>

For reference - http://jsfiddle.net/1aywhc2s/

Upvotes: 2

Related Questions