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.

css side by side boxes

Discussion in 'CSS' started by fadetoblack22, Jun 17, 2008.

  1. #1
    Hello, I have two blocks of text on my site. One underneath the other, but i want them to be side by site. i.e one on the left and one on the right.

    Can some one show me show to do this. I don't think you need the site code as it is a fairly generic problem.

    thanks :)
     
    fadetoblack22, Jun 17, 2008 IP
  2. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    
    <div class="box1">
    
      [b]// content[/b]
    
    </div>
    
    <div class="box2">
    
      [b]// content[/b]
    
    </div>
    
    <div class="box1">
    
      [b]// content[/b]
    
    </div>
    
    <div class="box2">
    
      [b]// content[/b]
    
    </div>
    
    Code (markup):
    
    * {
      margin:0;padding:0;
    }
    .box1, .box2 {
      width:280px;
      height:auto;
      float:left;
      margin-bottom:10px;
      padding:10px;
      border:1px solid #888;
    }
    .box1 {
      clear:left;
      margin-right:10px;
    }
    
    // rest of the stylesheet
    
    Code (markup):
    Something like this. You get the idea...

    Or you could float box1 to the left and box2 to the right and then clear both floats...
     
    risoknop, Jun 17, 2008 IP
  3. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #3
    fadetoblack22, Jun 19, 2008 IP
  4. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You need to add a clear after the very last floated box.

    So just add this to the CSS:

    
    .clear {
        clear:both;
    }
    
    Code (markup):
    I just like calling the class "clear." Call it whatever you want.

    Then add that div after the last floated box like so:

    
    <div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
    </div>
    
    Code (markup):
    That's the general structure that it should be.

    Hope this fixes the problem!
     
    rikun, Jun 20, 2008 IP
    sundaybrew and fadetoblack22 like this.
  5. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #5
    thanks, it works perfect! :)
     
    fadetoblack22, Jun 21, 2008 IP
  6. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #6
    sundaybrew, May 18, 2016 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Are you kidding? You revive an eight year old topic to add stupid advice?
     
    kk5st, May 19, 2016 IP
  8. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #8
    Actually:

    1) I kinda have been on this forum for a while and I like to read and talk to people about then Vs now

    2) Its like an old movie on a rainy day with your wife or GF , its a convention that leads to more.

    3) Old is new again, Kinda like all these old men taking Viagra and thinking they are 30 ;)

    http://www.searchenginepeople.com/blog/16033-reuse-content.html

    • It's good for SEO. Revisiting old articles will give you the opportunity to enhance your meta-information and keyword distribution (or unique words). Furthermore, linking to relevant pieces of content on your site will also help you boost your rankings. Lastly, changing the date of your article or adding a note (e.g. Updated on January 28), will let Google know that you've added fresh information to the article. A case-study conducted by Mozrevealed that faking blog freshness can lead to a significant boost in traffic.
    • It will improve your blog. Blogging has changed significantly over the last couple of years. Some of your older articles are probably not that great. Simply adding a few images, gifs, internal links, infographics or videos and reformatting the text will make your articles more user-friendly and attractive.
    • It will spare you from writer's block. As I already mentioned, writing original content every week can be extremely stressful. Older articles will provide you with a solid foundation that you can build upon and improve.
    • It will increase retention & impact. It's important to send the same message through multiple mediums. This will validate you as an expert and strengthen your relationship with readers.



    4) You are funny too !

    And you replied just to call me stupid ;-)
     
    sundaybrew, May 19, 2016 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    No, I said your advice is stupid. I have no idea about yourself.

    g
     
    kk5st, May 19, 2016 IP
  10. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #10

    LOL - You don't like bootstrap?
     
    sundaybrew, May 19, 2016 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    Have you looked at the bloated, wrongheaded markup and stylesheets it produces? If you write pages under the consideration that the one who follows you and has to debug and maintain the site is a violent psychopath who knows where you live, you will avoid bootstrap and other 'foundation' apps like the plague.

    g
     
    kk5st, May 19, 2016 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    That steaming pile of halfwit bullshit does nothing but crap all over every site it is used on. It is the pinnacle of developer ignorance and ineptitude, that just makes you work harder, not smarter. By its very nature it makes you use presentational classes and write more HTML, undoing pretty much ALL the progress that CSS and 4 Strict gave us. It's like some dipshit looked at OOCSS, completely ignored why CSS exists, and went "Let's drag everything back to the worst of 1990's development practices!"

    Admittedly, 1990's style slop it out any old way is hot and trendy now thanks to some of the stupidity found in HTML 5... like section, article, nav, footer, header, hgroup and all the other dipshit asshattery for people too stupid to use numbered headings and horizontal rules properly.

    There's a reason I call it bootcrap; do the world a favor and find a stick to scrape it off with before you go tracking it all over the Internet's carpets.... they're already filthier than the backseat of a taxi without adding insult to injury.

    ANYONE who thinks bootcrap provides legitimate benefits simply doesn't know enough about HTML, CSS, or accessibility to be flapping their gums on the topic -- which is why the people who use it fall into two categories; greenhorns who don't know any better, and idiots.

    Because as Ron White once said, you can't fix stupid.

    Hence why if you don't know what's wrong with this:
    
        <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
          <a class="navbar-brand" href="#">Project name</a>
          <ul class="nav navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </nav>
    
    Code (markup):
    Do the world a favor, back the **** away from the keyboard, and go take up something a bit less detail oriented like macramé... before someone like myself comes along, sees that code, and decides to insert their size 9 boot up one's backside with sufficient force that the people sleazing out such code end up flossing with my laces.
     
    deathshadow, May 24, 2016 IP
  13. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #13
    LOL - Oh stop - Just because someone wrote a few bad lines doesnt mean its bad,

    Its great for beginners
     
    sundaybrew, May 24, 2016 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    Bulsh!
     
    kk5st, May 24, 2016 IP
    sundaybrew likes this.
  15. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #15
    No, actually, it isn't. It promotes bad coding practices, teaches idiotic use of classes and promotes code-bloat. None of which amateurs should be exposed to.
     
    PoPSiCLe, May 24, 2016 IP
    sundaybrew likes this.
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    It's nube predating bullshit that teaches them how NOT to build a website. It prevents them from learning to use HTML properly, CSS properly, and on the whole is some of the most ignorant halfwit garbage out there... managing to somehow unseat jQueery from it's throne.

    ANYONE who would use it by choice doesn't know enough about HTML, CSS, Accessibility, usability, functionality, or any other damned thing to be building websites in the first damned place. EVERYTHING I've EVER seen made with it is utter and complete crap that just put the saddle on the person who wrote it and took them for a ride!

    Much less whatever poor sod the site is actually for.

    Bad education is worse than none... pointing beginners at a framework is probably the worst thing you could do to a beginner, as they're ignorant enough to believe it's how things should be done. Mind you, ignorant is not an insult, it just means you didn't know. STUPID is when you've been told, should know better, and STILL point people at it.

    Really with any framework you should learn how to do things without the framework FIRST so you know if the framework is worth a damned or not... of course once you learn how to do things without the framework you should be able to take one look and go "what the *** is this bullshit?!?"

    BTW that "few bad lines" is from their sample template, but look at ANY site built with bootcrap and it's the exact same asshat bullshit beginning to end! THAT'S HOW IT WORKS!!! Idiotic endless pointless presentational classes -- at which point you might as well go back to writing HTML 3.2 and pretend CSS doesn't even exist! THAT'S how back-assward bootcrap -- and the OOCSS asshattery it inherited the practice from -- is.

    If you don't see it that way, you might want to take the time to check if you actually know what HTML is, and how to use it properly as I very much doubt you do! If you do, you wouldn't have said "use bootstrap" like some... well, I lack the words in polite company... but needless to say wouldn't surprise me if you typically were using three to four times the HTML needed on every site you make.

    Times like this I miss Dan, he'd rip you a new hole in your backside the size of Missouri.
     
    Last edited: May 24, 2016
    deathshadow, May 24, 2016 IP
    sundaybrew likes this.
  17. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #17
    - Its seems you did not know Dan - may he RIP - He was one of my great friends and he would have been all for it. And he would have made it better @danshultz was a community guy that made things better - wow - you are lost

    - Jesus Bro - your going to have health issues getting that excited LOL

    BUT HEY - @DANShultz lives on <3
     
    sundaybrew, May 24, 2016 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Ehem... I taught Dan how to program. He came back and taught me semantic markup. PROBABLY knew him longer than you did, since I hosted his very first "real" website saving him from the hell that was GeoCities.

    If there was ANYTHING Dan was passionate about, it was semantic markup, and separation of presentation from content -- two things bootcrap pisses on from orbit!
     
    deathshadow, May 24, 2016 IP
    sundaybrew likes this.
  19. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #19
    You win ;)

    I miss dan !! !
     
    sundaybrew, May 24, 2016 IP
    deathshadow likes this.
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #20
    Now on that we can agree -- I can see him up there arguing with St. Peter over how Heaven's website is a inaccessible non-semantic mess that couldn't rank on search engines to save it's life.
     
    deathshadow, May 24, 2016 IP
    sundaybrew likes this.