Three divs in a row

(@jaudain)

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;
}

Viewing 12 replies - 1 through 12 (of 12 total)

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 6 months ago

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

Thread Starter jaudain
(@jaudain)

11 years, 6 months ago

My apologies, ill do that.
anticimex
(@anticimex)

11 years, 6 months 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.
Thread Starter jaudain
(@jaudain)

11 years, 6 months 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)

WPyogi
(@wpyogi)

11 years, 6 months 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.
Thread Starter jaudain
(@jaudain)

11 years, 6 months 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">
<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>
```
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 6 months 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.

Thread Starter jaudain
(@jaudain)

11 years, 6 months 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
WPyogi
(@wpyogi)

11 years, 6 months 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.
WPyogi
(@wpyogi)

11 years, 6 months ago

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

Thread Starter jaudain
(@jaudain)

11 years, 6 months 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!

WPyogi
(@wpyogi)

11 years, 6 months ago

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

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Three divs in a row’ is closed to new replies.

Three divs in a row

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics