Member Avatar for praveendasika 
.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
  • 361 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by Abdhesh_1

Dani AI

Generated

Short answer: the columns are dropping because of how floats, margins and the box model interact — not a mysterious bug. As showed, using margin-left to "place" columns can easily push the total horizontal space past the container width. was on the right track with floats, and correctly noted that a non‑floated element (like the right column in some examples) will start from the container and fall below the floats. ’s absolute positioning will work only in very specific, brittle layouts and is not recommended for a normal column layout.

Quick checklist to diagnose and fix this

  • Temporarily give each column a visible border or background and inspect computed widths in DevTools.
  • Ensure sum(widths + horizontal margins + borders + padding) ≤ 100% of the container. Small rounding and default body margins can push things over.
  • Use box-sizing: border-box so padding/border are included in widths.
  • Float all columns (and clearfix the container) or, better, use a modern layout method like Flexbox.

Recommended — modern, robust solution (Flexbox):

.content {
  display:flex;
  align-items:flex-start; /* top-align columns even if heights differ */
  gap:1%;
  padding:24px 0 40px;
  box-sizing:border-box;
}
.content_second_left { flex:0 0 20%; }
.content_third_left  { flex:1 0 55%; } /* grows to fill remaining space */
.content_right       { flex:0 0 15%; }

If you must use floats, add a clearfix and box-sizing:

*,*::before,*::after { box-sizing:border-box; }
.content::after { content:""; display:table; clear:both; }
.content > div { float:left; }

Final cautions: avoid using position:absolute for regular columns, and don’t rely on margin-left as the primary placement tool — it offsets from the container, not from the previous floated column (which is why saw the right column drop when content changed).

Member Avatar for akhtar.web 
<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>
01.zip (0.67 KB)
Edited by TrustyTony because: fixed formatting
Member Avatar for swatisharma7891

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

Member Avatar for abaqa

change margins in .content_third_left to 10% or something.

Member Avatar for GSmythe

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

Member Avatar for swatisharma7891

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.

Member Avatar for abaqa

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.

Member Avatar for abaqa

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.

Member Avatar for Abdhesh_1

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

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.