Member Avatar for bradly.spicer

Working on this site and now i'm majorly annoyed it isn't working.

<div id="Mid_Content">
<div id="Left_Content">
<h2>heading </h2>
<p>
test
</div>
<div id="Mid_point_Content">asdasd</div>
<div id="Right_Content">Form</div>
</div>

Mid_Content is a container and the rest inside it.

Here is the CSS

#Mid_Content {
    Width: 1000px;
}

#Left_Content {
width: 33%;
}
Mid_point_Content {
    Width: 33%;
    align: left;
}
Right_Content {
    Width: 33%;
    align: right;
}

Any idea why it's dropping down a line rather than lining up?

  • 3 Contributors
  • 4 Replies
  • 2K Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by bradly.spicer

Dani AI

Generated

A few things are tripping this up, . By default, divs are block-level, so they stack. You tried to control position with an align property, but there is no such CSS property for block layout. Also, in your CSS the rules for Mid_point_Content and Right_Content are missing the #, so those IDs never get styled. Finally, make sure your HTML is valid (close that <p> and other tags) or the browser may auto-correct in ways that break layout.

If you stick with the float approach suggested by and , make sure the container clears its floated children so the rest of the page does not slide up around them. A lightweight clearfix on the wrapper solves the "everything else is being moved" issue:

/* contain floated columns */
#Mid_Content::after {
  content: "";
  display: table;
  clear: both;
}

Modern, cleaner fix: use flexbox so you do not need floats at all. This keeps the three columns on one line and is easier to reason about:

/* correct the selectors and use flex */
#Mid_Content { display: flex; width: 1000px; }
#Left_Content, #Mid_point_Content, #Right_Content {
  flex: 1 1 calc(100%/3);
  box-sizing: border-box; /* padding/borders won't push widths over 100% */
}
/* optional spacing: #Mid_Content { gap: 10px; } */

Two extra tips:

  • Use 33.333% or calc(100%/3) instead of 33% to avoid rounding pushing a column to the next line.
  • If you later add padding or borders to the columns, keep box-sizing: border-box; so widths still fit in one row.

Recommended Answers

All 4 Replies

Member Avatar for Bachu

Use Float insted of align. Like

<div id="Mid_Content">

<div id="Left_Content">
<h2>heading </h2>
<p>
test</p>
</div>
<div id="Mid_point_Content">asdasd</div>
<div id="Right_Content">Form</div>
</div>


<style>
#Mid_Content {
    Width: 1000px;
    float: left;
}

#Left_Content {
width: 33%;
float:left;
}
#Mid_point_Content {
    Width: 33%;
    float: left;
}
#Right_Content {
    Width: 33%;
    float:left;
}

</style>
Edited by Bachu
Member Avatar for bradly.spicer

Thanks for your input, the only problem with that is that everything else is being moved then

Member Avatar for cmps

Dear 'bradly', you forgot to float the div, this will work:

<div id="Mid_Content">
<div id="Left_Content" style="float:left;">
<h2>Best Rates </h2>
<p>
2012 has been a great year for cheap mortgage deals. The Bank of England rate is at an all time low and mortgage lenders having to compete for your business, mortgage rates have been consistently low. Approaching the right mortgage provider for your circumstances is essential to getting the best rate. </p><p>
</p><p>
At We-Remortgage our mortgage advisers are highly experienced professionals, they have the knowledge and expertise to help you choose the right deal with latest applicants receiving rates as low as 2.68%!
</p><p>
Complete our 30 second form and start saving!
</p><p>
</p></div>
<div id="Mid_point_Content" style="float:left; width:33%;">asdasd</div>
<div id="Right_Content" style="float:right; width:33%">Form</div>

</div>

Good Luck :)

Edited by cmps
Member Avatar for bradly.spicer

tyvm :)

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.