Member Avatar for <M/>

What is causing my code to not center?

Can someone tell me what is causing the issues based off of my css?:

<style>
.parent_container {
    width: 1000px;
    height: 1700px;
    background-color: #2A261D;
    margin-left: 0 auto;
    margin-right: 0 auto;
    }
</style>
<style>
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; 
width: 1000px;
}

ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; 
line-height: 31px; 
border-left: none;
margin-bottom: -1px; 
overflow: hidden;
position: relative;

}

ul.tabs li a {
text-decoration: none;
color: #fff;
font: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif
display: block;
font-size: 13.5px;
padding: 0 20px;
outline: none;
}

ul.tabs li a:hover {
color: #ff6600;
}

html ul.tabs li.active, html ul.tabs li.active a:hover  {
color: white;
border-bottom: 1px solid #ff6600; 
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.tab_container {
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 1000px;
background: #333;
border-top: 1px solid #ff6600;
}

.tab_content {
padding: 20px;
font-size: 1.2em;
color:#000;
}
  • 2 Contributors
  • 2 Replies
  • 126 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

A short clarification and a few practical tips that expand on the thread: the layout failed to center because the browser ignored an invalid margin declaration. Browsers drop declarations that don’t follow CSS syntax, so the left/right margins stayed as defaults rather than becoming auto. OP fixed the problem by correcting the margins; was right that simplifying where styles live makes these bugs easier to spot.

Key points to avoid the same trap:

  • Centering a block with auto margins requires an explicit width and a valid margin declaration (for example, use margin: 0 auto; or margin-left: auto; margin-right: auto;).
  • Auto margins won’t center an element that’s floated or absolutely positioned; they apply to normal flow block elements.
  • If all children are floated, the parent’s height can collapse (use a clearfix or contain the floats), but that vertical collapse is separate from horizontal centering.

Quick debugging checklist:

  • Inspect the element in DevTools and look at the Computed/Styles panel to see which margin rules are applied or crossed out.
  • Verify the element isn’t floated or position: absolute.
  • Ensure a valid DOCTYPE so the browser isn’t in quirks mode.
  • Consolidate scattered <style> blocks into one stylesheet for easier diagnosis (as suggested).

For modern layouts, consider display: flex with justify-content: center for more flexible centering needs. The immediate fix here was simply to use valid margin syntax and confirm a fixed width on the container.

Recommended Answers

All 2 Replies

Member Avatar for pixelsoul

I don't see a problem with the css, but I'm unsure why you have it separated into different inline style tags.

Probably need to see the mark up and the rest of your css to tell what the problem is.

commented: :) +7
Member Avatar for <M/>

Well, i managed to figure out that the problem was caused by how i did the margins. i did them improperly.

thanks though!

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.