Member Avatar for 7arouf

hi there

i was working on my layout, but it seems that the content is not well posted in the layout.
here is a screen shot of my layout

Can you see that the layout is taking the space of the footer and the footerBottom!!!
how can i fix it!!

also other thing is that i need the menu on the right(NOT ON THE LEFT), but still its not working, i don`t know why:-/


note: HTML code and the css file are posted inside a MS Word document where You can download it

i appreciate any attempt to help

Master_Language.doc (54.5 KB)
  • 1 Contributor
  • 3 Replies
  • 100 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by 7arouf

Dani AI

Generated

— likely causes are simple: floated columns collapsing out of their container, or one of the main elements being absolutely positioned so the footer sits underneath. The result looks like the wrapper has zero height and the footer is not being pushed down. The right-hand menu not floating to the right usually comes from either a conflicting rule (float:left or margins) or not giving the menu a width/space to sit in.

Try this checklist in order:

  • Inspect with browser dev tools to see computed float and position for the content, menu and footer. Look for position:absolute on the wrapper/content.
  • Make the wrapper contain its floats (use a clearfix or set overflow:auto on the parent). This restores the parent height so the footer follows it.
  • Ensure the footer clears floats: clear: both; (and avoid absolute positioning on the footer).
  • For the menu, use float: right; and give it an explicit width, or switch to a modern layout (flexbox) so order and alignment are trivial.

Example CSS fixes (drop these into your stylesheet):

/* clearfix for the main wrapper */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* footer should sit below floats */
footer {
  clear: both;
  /* do not use position:absolute unless you want overlap */
}

And to place a sidebar on the right with floats:

.sidebar { float: right; width: 200px; }
.content { margin-right: 210px; } /* leave room for sidebar */

Modern alternative (simpler, no floats):

.container { display: flex; }
.content { flex: 1; }
.sidebar { width: 200px; }

Notes: check DOCTYPE (quirks mode changes float behavior), avoid pasting styles from Word (use plain text), and watch for conflicting selectors or !important rules. If these steps do not fix it, paste the HTML and CSS as plain text (not a Word file) so specific selectors can be checked.

Member Avatar for 7arouf

actually the layout is so messed up

Member Avatar for 7arouf

anyone:(

Member Avatar for 7arouf

anyone?!

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.