1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How To Make My Text Clear The <div>'s!

Discussion in 'CSS' started by Gray, Oct 30, 2004.

  1. #1
    Hi,

    I have decided to take on the task of doing away with all tables in a site I look after in favour of CSS.

    One basic table I use at the moment places three images across the screen, equi-spaced. I have a paragraph of text before and after this table.

    I have re-created this using CSS, but the paragraph of text that follows the three <div>'s is behind the three images. What have I done wrong?
    SEMrush
    Can someone help me pleeeeeeease!

    The CSS for the three <div>'s is below.

    #left {
    position: absolute;
    text-align:center;
    left:0%;
    width:33%;
    background:#032951;
    }

    #middle {
    position: absolute;
    text-align:center;
    left:33%;
    width:33%;
    background:#032951;
    }

    #right {
    position: absolute;
    text-align:center;
    left:66%;
    width:33%;
    background:#032951;
    }

    Thanks in advance,

    Gray
     
    Gray, Oct 30, 2004 IP
    SEMrush
  2. kavakava

    kavakava Active Member

    Messages:
    258
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    81
    #2
    Hi,

    try clearing the div containing the images by putting this line in your CSS for yor div containing the text:

    clear: left;

    See if that works.
     
    kavakava, Oct 30, 2004 IP
  3. expat

    expat Stranger from a far land

    Messages:
    873
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    I rarely use absolute here is three column example within one div

    .row{
    }
    .col1{
    float:left;
    background-color:white;
    Xpadding:0 15px 25px 10px;
    width:220px;
    }
    .col2{
    background-color:#ddd;
    float:left;
    width:200px;
    }

    .col3{
    background-color:#eee;
    float:left;
    width:180px;
    height:500px;
    }

    float left should do it and you can exchange fixed width: by using
    width: 33% etc.

    I onlyuse hight to make sure the next container is pos nicely below... so you can eliminate this as well.

    hope it helps
    M
     
    expat, Oct 30, 2004 IP
  4. Gray

    Gray Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Excellent!

    Just used the above tips and it works!

    Thank so much!

    Gray
     
    Gray, Oct 30, 2004 IP
  5. rubytaylor123

    rubytaylor123 Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    wonderful tips always ;)

    RUBY
     
    rubytaylor123, Jan 11, 2011 IP
  6. IAreOwn

    IAreOwn Peon

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    this was like 6 years ago, how did you even dig this post..
     
    IAreOwn, Jan 11, 2011 IP
  7. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #7
    Post count padding with searching old stuff? :D
     
    CSM, Jan 11, 2011 IP