WordPress.org

Ready to get started?Download WordPress

Forums

Three divs in a row (13 posts)

  1. jaudain
    Member
    Posted 1 year ago #

    Hey there,

    I thought I would register and pop a question, so I have a main div that houses three other divs which all house a left a middle and a right featured boxes area, I am currently trying to get them to line up next to each other in a row so to speak.

    I read a few threads on ways to do this, and tried them, however I had no joy.

    The Left, Mid and Rightfeature's are the divs that house their respective divs.

    Any help would be greatly appreciated

    .featurescontainer {
    	margin:0 auto;
    	width:900px;
    	height:300px;
    
    }
    #leftfeature {
    
    }
    
    #midfeature {
    
    }
    #rightfeature {
    
    }
    .featlefttop {
    	background-color:#8e8e8e;
    	width:250px;
    	height:40px;
    	text-align:center;
    	font-family:calibri;
    	font-size:14px;
    
    }
    .featleftmain {
    	background-color:#e5e5e5;
    	width:250px;
    	height:210px;
    
    }
    .featimageleft {
    	height:auto;
    	padding-top:16px;
    
    }
    .featmidttop {
    	background-color:#8e8e8e;
    	width:250px;
    	height:40px;
    	text-align:center;
    	font-family:calibri;
    	font-size:14px;
    }
    .featmidmain {
    	background-color:#e5e5e5;
    	width:250px;
    	height:210px;
    }
    .featimagemid {
    	height:auto;
    	padding-top:16px;
    }
    .featrighttop {
    	background-color:#8e8e8e;
    	width:250px;
    	height:40px;
    	text-align:center;
    	font-family:calibri;
    	font-size:14px;
    }
    .featrightmain {
    	background-color:#e5e5e5;
    	width:250px;
    	height:210px;
    }
    .featimageright {
    	height:auto;
    	padding-top:16px;
    }
  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    This sounds like a CSS issue and therefore should be inquired on a CSS forum.

  3. jaudain
    Member
    Posted 1 year ago #

    My apologies, ill do that.

  4. anticimex
    Member
    Posted 1 year ago #

    Try adding float:left; to each respective box.
    What this does is that it floats the div to the left so that other content appears next to it. If you do this to the three boxes, they will hopefully appear next to each other.

    Here's an example:

    #content {
    width: 600px;
    }
    #leftbox {
    width: 200px;
    float: left;
    }
    #middlebox {
    width: 200px;
    float: left;
    }
    #rightbox {
    width: 200px;
    float: left;
    }

    I did not exactly understand which part of the code you pasted you needed help with, but I hope this helped you out.

  5. jaudain
    Member
    Posted 1 year ago #

    Thanks for the response, I tried that however they still appear to be below each other.

    If this is any help basically, The #leftfeature is the left box which contains three divs.

    .featlefttop(contains a title php code)
    .featleftmain(cotnains the div below and)
    .featimageleft(contains a featured image from a category php code)

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    What is the HTML code you are using? It's really very, very difficult to help with CSS questions like this without seeing the code live, so if you can post a link to the page, that would be even better.

  7. jaudain
    Member
    Posted 1 year ago #

    Im using PHP, Im currently working offline on my local wordpress setup via xxamp, I can link in the code if that's any use?

    There's quite alot of code.

    <div class="featurescontainer"><!-- Features Container -->
    <div id="leftfeature">
    <div class="featlefttop">
    <?php if ( in_category('designs') ) { ?>
               <div class="post-cat-five">
     <?php } else { ?>
               <div class="post">
     <?php } ?>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    </div>
    <div class="featleftmain">
    <div class="featimageleft">
    <?php
    // The Query
    $the_query = new WP_Query( 'cat=5' );
    
    // The Loop
    while ( $the_query->have_posts() ) : $the_query->the_post();
    	if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    		the_post_thumbnail();
    	}
    endwhile;
    
    // Reset Post Data
    wp_reset_postdata(); ?>
    </div>
    </div>
    </div>
    <div id="midfeature">
    <div class="featmidttop">
    <?php if ( in_category('recent') ) { ?>
               <div class="post-cat-three">
     <?php } else { ?>
               <div class="post">
     <?php } ?>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    </div>
    <div class="featmidmain">
    <div class="featimagemid">
    
    <?php
    // The Query
    $the_query = new WP_Query( 'cat=1' );
    
    // The Loop
    while ( $the_query->have_posts() ) : $the_query->the_post();
    	if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    		the_post_thumbnail();
    	}
    endwhile;
    
    // Reset Post Data
    wp_reset_postdata(); ?>
    </div>
    </div>
    </div>
    <div id="rightfeature">
    <div class="featrighttop">
    <?php if ( in_category('websites') ) { ?>
               <div class="post-cat-three">
     <?php } else { ?>
               <div class="post">
     <?php } ?>
    </div>
    <div class="featrightmain">
    <div class="featimageright">
    
    <?php
    // The Query
    $the_query = new WP_Query( 'cat=4' );
    
    // The Loop
    while ( $the_query->have_posts() ) : $the_query->the_post();
    	if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    		the_post_thumbnail();
    	}
    endwhile;
    
    // Reset Post Data
    wp_reset_postdata(); ?>
    </div>
    </div>
    </div>
    </div><!-- Features Container END -->
  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can find the HTML when you view your website, right click on the page (assuming you're on Windows) and selecting "View source". The pop-up window will contain your website's html.

    You should paste large amounts of code in http://pastebin.com and then link us the Paste Bin page.

  9. jaudain
    Member
    Posted 1 year ago #

    Alright my bad, here you go, and im on windows but im coding in dreamweaver.

    Ok here is the code right from DW, http://pastebin.com/q7HdB3mc

    Here's the code from view source in chrome, http://pastebin.com/Kqz20Vgf

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, I copied the CSS and the HTML into a local file and the problem is that you are missing a closing div tag -- so the CSS is not working. The CSS mentioned above works once the closing div is added -- this CSS:

    #leftfeature {
      width: 200px;
      float: left;
    }
    
    #midfeature {
    width: 200px;
      float: left;
    }
    #rightfeature {
    width: 200px;
      float: left;
    }

    Widths are not necessarily correct -- just an approximation.

    In the HTML, the missing closing divs are just above the next main section (i.e. midfeature and rightfeature) -- so you'll need to figure out how that translates to the php code.

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Just checked more closely, and if you use 300px for the width -- that works to fill the container div.

  12. jaudain
    Member
    Posted 1 year ago #

    Oh my, thanks dude, you were right, many thanks, any questions I have next time, ill be sure to have a live version to prevent any hassle.

    Thanks again!

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You're welcome...no problem. Local work is probably preferable when you're at the stage you are...

Topic Closed

This topic has been closed to new replies.

About this Topic