Member Avatar for shajan.lnt@gmai

I have 4 <div> element first one is Header, 2nd and 3rd is Middle as right and left panel in the same row with fixed width and heigh and 4th <div> is footer.
How can I align the middle two <div> in the center

<div align="center" style ="background-color :Lime; height :30px">Heading</div>
    
    <div id ="leftAlign" align="center" style ="float:left ; background-color :Fuchsia ; width :45%">Left</div>
    <div id ="rightAlign" align="center" style ="float:left; margin:0px; background-color :Navy ; width :45%">Right</div>
    
    <div align="center" style ="background-color :Lime; clear :both ; height :30px">Heading</div>
Edited by kvprajapati because: Added [code] tags.
  • 3 Contributors
  • 2 Replies
  • 670 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Fortinbra

Dani AI

Generated

Two quick facts first: floated elements will hug the left (or right) edge of their containing block — they do not auto‑center — so you need either to center a wrapper around them or use a modern layout mode (flex/grid/inline‑block). ’s inline align attributes and inline floats should be moved into CSS. As suggested, a centered wrapper with a fixed/defined width is the classic float-era fix; ’s post shows that pattern in action. Below are three practical options (flexbox recommended).

Flexbox (recommended — simple and responsive)

<div class="middle">
  <div class="panel">Left</div>
  <div class="panel">Right</div>
</div>

.middle {
  display: flex;
  justify-content: center; /* centers the row */
  gap: 20px;               /* space between panels */
  max-width: 1000px;
  margin: 0 auto;          /* keeps whole block centered on very wide screens */
}
.panel {
  flex: 0 1 45%;           /* take ~45% each, but remain flexible */
  box-sizing: border-box;
}

Inline-block (works well if you cannot use flex)

<div class="middle-inline">
  <div class="panel">Left</div>
  <div class="panel">Right</div>
</div>

.middle-inline { text-align: center; }
.middle-inline > .panel {
  display: inline-block;
  vertical-align: top;
  width: 45%;
  box-sizing: border-box;
}

Float-era wrapper (if you must keep floats)

<div class="wrap">
  <div class="panel">Left</div>
  <div class="panel">Right</div>
</div>

.wrap { width: 900px; margin: 0 auto; overflow: auto; /* contains the floats */ }
.wrap .panel { float: left; width: 44%; margin-right: 2%; box-sizing: border-box; }
.wrap .panel:last-child { margin-right: 0; }

Troubleshooting tips: ensure sum(widths + gaps + borders + padding) ≤ container width; use box-sizing: border-box to make that easier; avoid align and <center> (deprecated); use browser devtools to inspect computed sizes and add temporary outlines (e.g. outline:1px dashed red) to see where elements actually sit.

Recommended Answers

All 2 Replies

Member Avatar for Knvn

If I understood your question properly, this is what you are looking for:

<div>
        <div style="width: 694px; height: 30px">
            <div style="float: left; text-align: right; width: 340px;">
                <asp:Label ID="Label1" runat="server" Text="User Name:"></asp:Label>
            </div>
            <div style="float: right; width: 340px;">
                <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
            </div>
        </div>
        <div style="width: 694px; height: 30px">
            <div style="float: left; text-align: right; width: 340px">
                <asp:Label ID="Label2" runat="server" Text="Password:"></asp:Label>
            </div>
            <div style="float: right; width: 340px;">
                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
            </div>
        </div>
        <div style="width: 694px; height: 30px">
         <center>
            <a href="PasswordRecover.aspx">Are you forgot password?</a>    
         </center>
        </div>
    </div>
Member Avatar for Fortinbra

The div tag that you want centered need to have a defined width, then set the margins to auto. I would surround your two divs that you want centered, give this new div a definite width (no percentages), then sit it's margins to auto.


OR if you're not concerned with deprecated tags or standards, the you can use <center></center> to center things, but this is NOT recommended because it will put IE into quirks mode, and things may misbehave in other browsers as well.

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.