Author

SIVA
posted 173 posts
since Dec 19, 2011
from

how to arrange Div tags horizontacally

Posted on: 07 Feb 2012

Dear All,
I need to arrange 4 div tags Horizontally but if i write as follows its coming vertically..

<div></div><div>..........................</div>

How can i do this?


	If this post helps you, then mark as "Correct Answer"

Satyapriya Nayak
posted 1902 posts
since Mar 24, 2010
from

Re: how to arrange Div tags horizontacally

Posted on: 07 Feb 2012

Accepted Answer

Hi Siva,

Try this...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Register_using_param.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .container{
width:600px;
padding:0;
border:5px solid #ddd;
margin:0 auto;
}
.left{
float:left;
width:150px;
height:300px;
text-align:center;
background:#4b471a;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#1b1b1b;
}
.middle{
float:left;
width:300px;
height:300px;
text-align:center;
background:#a19c5a;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#1b1b1b;
}
.right{
float:left;
width:150px;
height:300px;
text-align:center;
background:#4b471a;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#1b1b1b;
}
.clear{
clear:both;
height:0;
width:100%;
}

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="container">
<div class="left">Left</div>
    <div class="middle">Middle</div>
    <div class="right">Right</div>
    <div class="clear"></div>
</div>
    </div>
    </form>
</body>
</html>

Thanks

Satyapriya Nayak
posted 1902 posts
since Mar 24, 2010
from

Re: how to arrange Div tags horizontacally

Posted on: 07 Feb 2012

Hi Siva,

Try this also,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Register_using_param.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">

.content{
float: left;
width: 10%;
border:none;
}

.rightcontent{
float: right;
width: 10%;
border:none
}

.hspacer{
width:5%;
float:left;
}

.clear{
clear:both;
}

    </style>
</head>
<body>
<form id="form1" runat="server">

<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>

    </form>
</body>
</html>

Thanks

SIVA
posted 173 posts
since Dec 19, 2011
from

Re: how to arrange Div tags horizontacally

Posted on: 07 Feb 2012

Thank you


	If this post helps you, then mark as "Correct Answer"