Jump to content


Photo

HTML div's + CSS problem


  • Please log in to reply
5 replies to this topic

#1 nygorn

nygorn

    Young Padawan

  • Members
  • Pip
  • 54 posts
  • Gender:Male
  • Location:Sweden

Posted 08 March 2011 - 01:09 PM

Yo!
Got a major problem but it's small -.-
It's a major problem cuz it fucks up the whole site.
But it's probably easy to solve.

Posted Image

My problem is that "content" and "right-side" doesn't hang on to each others lenght.
I've tried "height:100%" but then the content in the div "content" just floats outside the div..

CSS:

#styre {
background:#FFD191;
float:left;
}

#content {
width: 700px;
background:#ffffff;
border-left:1px solid #000000;
border-right:1px solid #000000;
float:left;
padding-left:25px;
padding-right:25px;
padding-top:5px;
padding-bottom:25px;
}

#right-side {
padding-top:5px;
width: 288px;
padding-left:10px;
float:right;
background:#FFD191;

}

HTML:
<div id="styre">
<div id="content"> A BUNCH OF PHP CODES HERE</div>
<div id="right-side"></div>
</div>


#2 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 08 March 2011 - 01:51 PM

Google: css faux columns for a description of the problem and common solutions.

#3 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 08 March 2011 - 02:10 PM

try:
overflow: hidden

for both columns

#4 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 08 March 2011 - 10:33 PM

Google: css faux columns for a description of the problem and common solutions.


You mean, search Pixel2Life ;) haha

No, i mean: Click here.

Jk, i guess it's hard not to side with Yoda on this...
:yodasearch:

@derek: Setting the overflow like that won't work. If my understanding is correct, he wants the two columns to have the same height, and that height is determined by the content, not the CSS.

Edited by rc69, 08 March 2011 - 10:34 PM.


#5 derek.sullivan

derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 343 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 08 March 2011 - 11:33 PM

He said that the content overflowed the height of the div box. overflow:hidden would expand the div.

#6 rc69

rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 09 March 2011 - 12:30 AM

Perhaps we are reading what he said differently then. Either way, overflow:hidden would hide any extraneous content that goes outside the bounds of a specified height/width (if the neither height nor width are specified then overflow has no effect).




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users