0
.content {
	padding:24px 0 40px;
	Width:100%;
}
.content_left
{
	float :left ;
	width:15%;
}
.content_second_left
{
	margin-left:15%;
	width :20%;
	background-color :Black;
		
	
}
.content_third_left
{
	margin-left:35%;
	width :50%;
	background-color :Red;
	float :left ;
	
}

.content_right
{
	margin-left :85%;
	width:15%;
}
<div class="content">
       
         <div class ="content_second_left" >
         
         <asp:ContentPlaceHolder ID ="ImagePlaceHolder" runat ="server"></asp:ContentPlaceHolder>
         
         </div>
       
         
          <div class="content_third_left">      
                 <form id="form1" runat="server">
           
                
                         <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
                     
                 </form>
         </div>
         
 </div>

One is up and other is down ....:( How to align them next to each other?

6
Contributors
8
Replies
14
Views
6 Years
Discussion Span
Last Post by Abdhesh_1
1
<html>
<head>
<style type="text/css">
<!--
.content {
Width:100%;
padding:24px 0 40px;
background-color:#f1f1f1;
}
.content_left
{
float :left;
width:15%;
background-color:#0099FF;
}
.content_second_left
{
float:left;
width :20%;
margin-left:5%;
background-color:#FFCC66;
}
.content_third_left 
{
float :left;
width :55%;
margin-left:5%;
background-color :Red;
}
.content_right
{
margin-left :85%;
width:15%;
}

-->
</style>
</head>

<body>
<div class="content">
         <div class="content_left">Content Left Div</div>
         <div class ="content_second_left">Content Second Left

           <asp:ContentPlaceHolder ID ="ImagePlaceHolder" runat ="server"></asp:ContentPlaceHolder>

         Div</div>


          <div class="content_third_left">Content Third Left  Div   
                 <form id="form1" runat="server">


                         <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

                 </form>
         </div>

 </div>
</body>
</html>

Edited by pyTony: fixed formatting

Attachments
0

hey! you have no need to worry about div position, it's vary simple and easy.... just set the div position as absolute in css style and then you can set any div at its desired position...

here is the code...

<style>

.content
{
position:absolute;
}
</style>


now go to your design page ...you will find a div with draging corners...drag its corner and set it to the position which you want... do this for each div...

0

>One is up and other is down .... How to align them next to each other?
The solution posted by akhtar.web gets three columns next to each other, but the fourth column is below the others. Copy the suggestion code and add a few paragraphs to each section for a simple test in your browser. I have the same problem (rightmost column goes under others). I would like to know how to do this in the code, not using an editor that allows dragging of div corners. Change margin to 10% in third left caused entire third column to go under others. The position: absolute suggestion did not solve it either. Anyone solve this yet?

0

I think u r working on notepad, I advise u to download any good editor, then use the absolute position of div, I'm sure you'll feel this easiest among all methods, I have also faced this kind of problem and all have solved by setting the position.

0

In both codes of praveendasika and akhtar.web .content_right takes 75% of width not 85%. Since first three divs declares with float:left so their distance starts from their previous div while .contect_right was not declared with float:left so it takes its distance from .content div. In short it depends on margin and float and measurement distance. I think now it would be clear, if you still need any help then post your code. One more thing you dont need the position:absolute coz there are certain requirements where we can use position:absolute. It is always best to code rather than dragin divs.

0

For better understanding add border (border:1px solid blue)to each div and change margin of .content_second_left & .content_third_left to 5% and .content_right to 75%. I think i missed that part in previous response. Let me know if it solves your problem.

0

how to make html "fill (form) div and input field change for next button then submit form" without refreshing page....

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.