Menu
Hi,
Apologies if this is a basic question but I’m trying to arrange some div elements (of variable heights) on a page depending on the screen width: if enough space, split into 2 columns, if not show full width. I’m pretty much there but when the div is split in two, the third div in this example begins at the position of the base of the second div.
I’d like however many divs there are to start at the bottom of the div above them?
Please can anyone help or suggest the next best way of doing this?
Thanks very much!
Code below:
<%@ Page Language=”C#” AutoEventWireup=”true” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “
<html xmlns=”
<head id=”Head1″ runat=”server”>
<title></title>
<script type=”text/javascript”>
function chooselayout()
{
if (document.body.clientWidth > 900){
d1.style.width = “49%”;
d2.style.width = “49%”;
d3.style.width = “49%”;
}
else
{
d1.style.width = “100%”;
d2.style.width = “100%”;
d3.style.width = “100%”;
}
}
window.onload = function()
{
chooselayout();
}
</script>
<style type=”text/css”>
#d1{height:50px; background-color:Aqua; float:left;}
#d2{height:100px; background-color:Fuchsia; float:left;}
#d3{height:150px; background-color:Green; float:left;}
</style>
</head>
<body>
<div id=”d1″></div>
<div id=”d2″></div>
<div id=”d3″></div>
</body>
</html>