Help Help Help

+1 Mehar Singh · November 22, 2015
Heylo there everyone... Im a newbie to web development and I have just about finished watching buckys tutorials on xhtml and css...so i need a lil help here....there are 4 boxes i created and i just want to place these boxes 2 vertically lined up on the left and 2 vertically lined up on the right..... Below is the code for the webpage so the problem here is that the 4 boxes are being lined up below each other....rather than 2 on each side i.e . 2 on  the left corner and 2 on the right corner....Solutions awaited..... 

<!-- This is from the video no 36  - Absolute Positioning  -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html>
<head>
<title>Wazzup up !!</title>
<style type ="text/css">
#apples {border:2px solid red;
 font-weight:bold;
 font-size:30px;
 width:150px;
 height:150px;
 left:500px;
 top:1000px;
                  margin:100px;
 padding:50px;
         }
#blueberry {border: 2px solid blue;
 font-weight: bold;
 font-size:30px;
 width:150px;
 height:150px;
 left:500px;
 top:1000px;
 margin:100px;
         padding:50px;
 }
#mangoes {border:2px solid yellow;
 font-weight:bold;
 font-size:30px;
 width:150px;
 height:150px;
 right: 150px
 top:1000px;
 margin:100px;
         padding:50px;
 }
          #right {border:2px solid green;
 font-weight:bold;
 font-size:30px;
 width:150px;
 height:150px;
 right:150px;
 top:1000px;
 margin:100px;
         padding:50px;
 }
</style>
</head>
<body>
<div id = "apples">I am the apples box</div>
<div id = "blueberry">I am the blueberry box</div>
<div id = "mangoes">I am the mangoes box</div>
<div id = "right">I am the kiwi box</div>
</body>
</html>

Post a Reply

Replies

Oldest  Newest  Rating
0 Kushal Parikh · November 24, 2015
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html>
<head>
<title>Wazzup up !!</title>
<style type ="text/css">
#apples {border:2px solid red;
font-weight:bold;
font-size:30px;
width:150px;
height:150px;
position:absolute;
left:0px;
top:25px;
margin:100px;
padding:50px;
}
#blueberry {border: 2px solid blue;
font-weight: bold;
font-size:30px;
width:150px;
height:150px;
position:absolute;
left:0px;
top:300px;
margin:100px; 
padding:50px;
}
#mangoes {border:2px solid yellow;
font-weight:bold;
font-size:30px;
width:150px;
height:150px;
position:absolute;
left: 850px; 
top:25px; 
margin:100px;
padding:50px;
}
#right {border:2px solid green;
font-weight:bold;
font-size:30px;
width:150px;
height:150px;
position:absolute;
left:850px;
top:300px;
margin:100px; 
padding:50px;
}
</style>
</head>
<body>
<div id = "apples">I am the apples box</div>
<div id = "blueberry">I am the blueberry box</div>
<div id = "mangoes">I am the mangoes box</div>
<div id = "right">I am the kiwi box</div>
</body>
</html>
0 Shreyas Madhusudan · November 23, 2015
Use float:left 
and float:right in the CSS
Try this code in your CSS :)

#apples {
border: 2px solid red;
font-weight: bold;
font-size: 30px;
width: 150px;
height: 150px;
/* left: 500px; */
float: left;
/* top: 1000px; */
margin: 10px;
padding: 50px;
}

#blueberry {
border: 2px solid blue;
font-weight: bold;
font-size: 30px;
width: 150px;
height: 150px;
/* left: 500px; */
float: left;
/* top: 1000px; */
margin: 10px;
padding: 50px;
}

#mangoes {
border: 2px solid yellow;
font-weight: bold;
font-size: 30px;
width: 150px;
height: 150px;
float: right;

right: 150px top:1000px;
margin: 10px;
padding: 50px;
}

#right {
border: 2px solid green;
font-weight: bold;
font-size: 30px;
width: 150px;
height: 150px;
right: 150px;
/* top: 1000px; */
float: right;
margin: 10px;
padding: 50px;
}
0 Aju Antony · November 23, 2015
Hi,

Since you wish to use "Absolute Positioning", you need to add an additional attribute to all your CSS Elements.
position: absolute;

After you've added this attribute to all four of the elements, adjust the "top:" parameter to achieve what you desire here :)
There are six other values for position attribute, try exploring them too :D
Happy Coding :D
  • 1

HTML / CSS / Web Design

107,121 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators