Member Avatar for cssweb

helo guys how are you, my proplem is the div has exceed the footer and this image will clarify what do i mean

this is all codes which i used

#left{//this div for left side
float:left;
width:140;
margin:0px;

}

#right{this is for right side
float:right;
width:140;
margin:0px;

}


#headblcok{//this div for head of the news which i named "main"
background:#282828;
color:white;
padding:1px;
text-align:center;
margin-left:1px;
margin-right:1px;
font-size:20px;
display:inline;
position:absolute;
width:941px;

}

#subhead{//this div for the title of the news
background:#dbdbdb;
margin-bottom:1px;
margin-top:2px;
font-size:17px;
padding:4px;
color:black;
text-align:right;
display:block;

}

.content{// all div i put them in this div 
display:absolute;
width:1225px;
margin: 0 auto;
text-align: right;
border:1px solid white;
margin-top:10px;
border-radius:8px;
background:white;

}



<div id='headblcok'>main // title of the news i put them as this 

<div id='subhead'>here i want to put the title of the news</div>
<div id='subhead'>here i want to put the title of the news</div>
<div id='subhead'>here i want to put the title of the news</div>
<div id='subhead'>here i want to put the title of the news</div>
<div id='subhead'>here i want to put the title of the news</div>
<div id='subhead'>here i want to put the title of the news</div>
<div id='subhead'>here i want to put the title of the news</div>
<div id='subhead'>here i want to put the title of the news</div>
<div id='subhead'>here i want to put the title of the news</div>

</div>
  • 3 Contributors
  • 7 Replies
  • 125 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by cssweb

Dani AI

Generated

The layout breaks because floated or absolutely positioned elements were taken out of normal flow, so the parent never grows to contain them and the footer sits up under the floats. 's clearing-element suggestion is a valid quick fix, but the root causes in the original CSS should also be corrected: give widths units (for example 140px), don't reuse the same id for repeated items (use a class), and avoid position: absolute on blocks that should push the footer down.

A reliable fix is to let the container contain its floated children (using overflow or a clearfix) and to use classes for repeated subheads. Example CSS that does not duplicate the code in the thread:

/* container contains floats so footer is pushed down */
.wrapper {
  max-width: 1225px;
  margin: 10px auto;
  background: #fff;
  overflow: auto;   /* contains floated children */
  box-sizing: border-box;
}

/* columns and headings */
.col-left  { float: left;  width: 140px; }
.col-right { float: right; width: 140px; }
.header    { position: relative; padding: 8px; font-size: 20px; }
.subhead   { display: block; padding: 4px; margin: 2px 0; }

If preferring a clearfix instead of overflow, add the pseudo-element rule and apply a clearfix class to the wrapper:

.clearfix::after { content: ""; display: table; clear: both; }

Small checklist: replace repeated id with a class, add px to numeric widths, remove incorrect display:absolute usage, ensure the footer is not absolutely positioned, and inspect computed heights with browser devtools. Further reading: position (MDN) and overflow (MDN).

Recommended Answers

All 7 Replies

Member Avatar for AleMonteiro

But how do you want the result to be?

Member Avatar for GliderPilot

After your main content add:

<div style="clear:both;">&nbsp;</div>

Member Avatar for cssweb

alos the same result , if there is another way to do that i am ready

Edited by cssweb
Member Avatar for cssweb

AleMonteiro my list news is excedded after footer as you see in the above image

Member Avatar for AleMonteiro

But you don't want it to exceed or you want the footer to go down with it?

Member Avatar for cssweb

i am sorry for expression yes i want the footer to go down with it

as this image :

Edited by cssweb
Member Avatar for cssweb

prolem has been soloved thank guys

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.