Two Div's not aligning next to each other

Question

praveendasika 0 Newbie Poster

12 Years Ago

.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?

div tags usability web-design

6 Contributors
8 Replies
342 Views
3 Years Discussion Span
Latest Post 9 Years Ago Latest Post by Abdhesh_1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

akhtar.web 0 Newbie Poster · Answer 1 · 2011-08-02T05:53:46+00:00

<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>

swatisharma7891 0 Newbie Poster · Answer 2 · 2011-08-02T22:37:35+00:00

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...

abaqa 0 Newbie Poster · Answer 3 · 2011-08-03T10:13:21+00:00

change margins in .content_third_left to 10% or something.

GSmythe 0 Newbie Poster · Answer 4 · 2011-09-04T08:08:26+00:00

>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?

swatisharma7891 0 Newbie Poster · Answer 5 · 2011-09-04T10:34:59+00:00

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.

abaqa 0 Newbie Poster · Answer 6 · 2011-09-15T17:51:27+00:00

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.

abaqa 0 Newbie Poster · Answer 7 · 2011-09-15T18:08:17+00:00

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.

Abdhesh_1 0 Newbie Poster · Answer 8 · 2014-10-13T07:52:30+00:00

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