Problem:
I am trying to align divs next to each other using float:left but I can't get it to work. Instead, they are aligning under each other.
PHP code:
while ($row = mysql_fetch_assoc($result))
{
$kriterium .= '<div style="float:left;">'.$i.'</div>';
$betyg .= '<div style="float:left;">'.$row['RID'].'</div>';
$mean += $row['RID'];
$i++;
}
$meanvalue = round ($mean / ($i-1), 2);
$kriterium .= '<div style="float:left;"><b>Medelvärde</b></div>';
$betyg .= '<div style="float:left;"><b>'.$meanvalue.'</b></div>';
$html .= '
<div class="table table-condensed table-bordered neutralize">
<div>
<b>Kriterium</b>'.$kriterium.'
</div>
<div>
<b>Betyg</b>'.$betyg.'
</div>
</div>';
Desired output:
Question:
What is wrong with the CSS code that needs to be modified so that divs are aligned like columns next to each other?
You need to set a width for each div. The width of the first div will be wider than the width of the other divs.
<!DOCTYPE html>
<html>
<head>
<title>Kexx</title>
<style type='text/css'>
div.table-bordered > div {
width:420px;
}
div.table-bordered > div > div.c {
width:94px;
}
div.table-bordered > div > div {
float:left;
width:24px;
}
div.table-bordered div {
border:1px solid #333;
}
</style>
</head>
<body>
<div class="table table-condensed table-bordered neutralize">
<div>
<div class='c'><b>Kriterium</b></div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<br style='clear:both;'/>
</div>
<div>
<div class='c'> <b>Betyg</b></div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<br style='clear:both;'/>
</div>
</div>
</body>
</html>
http://jsfiddle.net/Zv7Dp/
try giving position as relative , btw , if you have a separate style sheet , you can define a class and put all style under one class , any way I still prefer a html table than this , and you can find as many as css table styles by googling !
Related
<div style="width: 1000px;height: 200px;float: left;opacity:0.9;border-color:#cc3e19;border-style:solid;margin-bottom:30px">
<div style="width: 500px;height: 100px;float:left;">
<?php for ($i = 1;$i<=$Breview;$i++) {
print '<span class = "reviewSpan" >★</span>';
}
?>
</div>
</div>
<style>
.reviewSpan{
color: #FFFF00;
}
</style>
I need to add <h2> tag around <span> tag to make star icon bigger but it prints stars vertically , how can i avoid it and make them print horizontally
Try below code-css
<span style="font-size: 50px;">★</span>
I am creating a div structure for displaying data from db.
In my case all are getting written else I was not able to print that data properly.
I have one main div (col-md-12) and in that I have added (col-md-4)
I have fetch images from db like echo $img; in php so the images will come properly but they are not from left to right like they are displayed below on each div rather than inserting left to right, so my question is how to insert that div from left-to- right rather than below of each other
and what i want like this below img
This is my code
Your HTML structure should be like that:
<div class="main">
<div class="col-sm-12">
<div class="col-sm-4">
// image one
</div>
<div class="col-sm-4">
// image two
</div>
<div class="col-sm-4">
// image three
</div>
</div>
</div>
IF you are using HTML inside the loop than you can follow this:
<div class="main">
<div class="col-sm-12">
<?
$i = 1;
foreach ( yourloop ) {
?>
<div class="col-sm-4">
// image one
</div>
<?
// after every third record use clear div
if($i == 3){
?>
<div style="clear:both"></div>
<?
$i = 1; // reassign the value
}
$i++;
}
?>
</div>
</div>
UPDATE 1:
Solution with your provided code:
<div class="main">
<div class="col-sm-12">
<?
while ( yourloop ... ) {
?>
<div class="col-sm-4">
// your stuff
</div>
<?
}
?>
</div>
</div>
What i have changed?
you need to use <div class="col-sm-4"> inside your loop and you can also follow the second example with clear:both; div.
UPDATE 2 (For Future aspects):
For new designers and developers you must need to understand Basic grid layouts:
FROM Bootstrap Examples:
You can also follow this link getting information about the difference between bootstrap classes:
FROM other answer:
.col-xs = *Extra small devices (ie Phones) (<768px)
.col-sm = Small devices (ie Tablets) (≥768px)
.col-md = Medium devices (ie laptops, or small desktops) (≥992px)
.col-lg = Large devices (ie Desktops) (≥1200px)*
Since this is bootstrap you can do this by keeping three images in a row.
Pseudocode
counter = 0
for i in images:
if counter = 0:
print "<div class = 'row'>"
print "<div class='col-md-3'>"+i+"</div>"
counter++;
counter = counter % 3;
if counter == 0:
print "</div>"
You could simply create blocks with the (CSS) style definition float:left; as in the example below:
<?php
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"de-de\" lang=\"de-de\" >
<head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />
<style type="text/css">
";
echo '.panel { float:left; margin:4px; border:1px solid #999; }'.PHP_EOL;
echo '.clear { clear:both; }'.PHP_EOL;
echo 'H3 { font-size:0.8em; background-color: #666; color:white; margin:0 0 4px 0; font-weight:bold; text-align:center; }'.PHP_EOL;
echo "</style>
</head>
<body>
";
echo '<h2>Block 1</h2>';
for ($xi=1; $xi<=5; $xi++) {
echo '<div class="panel"><h3>Panel 1.'.$xi.'</h3><br />contents go here<br />contents go here<br />contents go here</div>';
}
echo '<div class="clear"></div>';
echo '<h2>Block 2</h2>';
for ($xi=1; $xi<=5; $xi++) {
echo '<div class="panel"><h3>Panel 2.'.$xi.'</h3><br />contents go here<br />contents go here<br />contents go here</div>';
}
echo '<div class="clear"></div>';
echo "</body>
</html>
";
?>
every second item needs to be on right side of the page, but inline with first item, so it would create 2x2 type grid of both echoed items.
I added some CSS like this
.container{float:left; width:50%;} but it didn't work.
if ($file6 % 2 == 1)
{
echo '<div id="container">
<div id="thumbnail">
<img src="/images/tirgus/thumbs/'.$row['id'].'.jpeg" width="141" height="74" alt="image" />
</div>
<br>
<div id="info1"><sub>' .cleanString($file2).'</sub></div>
<br>
<div id="info2"><sub>Telefons: ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div><br>
<div id="info3"><sub>Iepostoja:</sub> ' .cleanString($file5). '</div><br>
</div><widgets><customization><css> <link rel="stylesheet" href="template_faili/gallery.css"></css></customization></widgets>';
}
else if ($file6 % 2 == 0) {
echo '<div id="container2">
<div id="thumbnail2">
<img src="/images/tirgus/thumbs/'.$row['id'].'.jpeg" width="141" height="74" alt="image" />
</div>
<br>
<div id="info1"><sub>' .cleanString($file2).'</sub></div>
<br>
<div id="info2"><sub>Telefons: ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div><br>
<div id="info3"><sub>Iepostoja:</sub> ' .cleanString($file5). '</div><br>
</div><widgets><customization><css> <link rel="stylesheet" href="template_faili/gallery.css"></css></customization></widgets>';
}
}
.container{float:left; width:50%;}
will be want you want. FYI, please DO NOT use duplicate ids in your html.
In the interest of showing how you would use a modulo to achieve this, you would want to do something like:
foreach($files as $file_count => $file) {
if ($file_count % 2 == 0)
{
echo '<div class="thumb row">';
}
echo '
<div class="container">
<div class="thumbnail">
<a href="/images/'. $file .'" title="'.cleanString($file).'" class="thickbox">
<img src="/images/'.$row['id'].'.jpeg" width="141" height="74" alt="image" />
</a>
</div>
<br />
<div id="info"><sub>' .cleanString($file2).'</sub></div>
<br />
<div id="info"><sub>text ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div>
<br />
<div id="info"><sub>text </sub> ' .cleanString($file5). '</div>
<br />
</div>';
if ($file_count % 2 == 1)
{
echo '</div>';
}
}
Note that the above will probably not work as-is with your script because I am using a made up array that loops with the value $file while your code appears to have the various values in separate arrays. The overall idea is this:
foreach($files as $file_count => $file) {
Loops over each image/file you are wanting to output, starting at 0, so that :
$file_count % 2 == 0
indicates the first of two pair and
$file_count % 2 == 1
indicates the second of two pair.
So before the first of two are output, you start a container div such as:
<div class="thumb row">
Then you output your interior html as you already are, using the same html for both thumbnails.
and after the second of two are output, you close that div via:
</div>
Now each two of your thumbnail divs are wrapped in the thumb row container div, allowing you to apply css such as:
.thumb.row .container {
display: inline-block;
}
which will line them up side by side but still break on the outer row div.
Also, in addition to this being an ill-advised approach, you should not be setting the id attribute inside a loop, as this will set the same id to multiple elements, which is invalid HTML. Instead, update the code to use class which can be applied to multiple elements.
Each div need to use different classes/ids, where the inline behavior is defined or not.
$col[0] = 'class1';
$col[1] = 'class2';
for ($i=0; $i<$count; $i++) {
$output .= '<div class="'. $col[$i%2] . ' >';
}
I created a page to display messages that are saved into a database.The messages are displayed with a picture. I have the following DIV layout:
<div id="MessageWrapper">
<div id="MessagePicture"></div>
<div id="MessageText">
<div id="MessageTitle"></div>
<div id="MessageContent"></div>
</div>
</div>
I wanted the div 'MessagePicture' and 'MessageText' to alternate their position (left and right) So The final code I have is:
$i = 0;
while ($Row = mysql_fetch_assoc($Result))
{
$class = (++$i % 2) ? 'even' : 'odd';
echo '
<div id="MessageWrapper">
<div id="MessagePicture" class="'.$class.'">
<style>
#MessagePicture {
background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);
background-repeat: no-repeat;
background-position: center
</style>
</div>
<div id="MessageText" class="'.$class.'">
<div id="MessageTitle">
<h1>'.$Row['NameBox'].'</h1>
</div>
<div id="MessageContent">
<p>'.nl2br($Row['MessageBox']).'</p>
</div>
</div>
</div>
The problem I'm facing: although the parsed source code has different codes ($Row['Code']) in the url of the background image, all the messages display the same image.
It is always the first image of the first ($Row['Code']) that is entered into the database.
Does anyone know how to resolve this problem?
Give each of your divs a unique id. For example:
$i = 0;
while ($Row = mysql_fetch_assoc($Result))
{
$class = (++$i % 2) ? 'even' : 'odd';
echo '
<div id="MessageWrapper'.$i.'">
<div id="MessagePicture'.$i.'" class="'.$class.'">
<style>
#MessagePicture'.$i.' {
background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);
}
</style>
... etc ...
}
You end up with the first div having an id of MessagePicture1 and a corresponding #MessagePicture1 style, the next one MessagePicture2, and so on.
I have the code below to split my for each statement into two separate divs:
<?php
$previousLetter = false;
?>
<?php
$i=1; // have a counter variable
foreach($this->clubs as $clubs) : ?>
<?php
$firstLetter = substr($clubs->club_name, 0, 1);
if ($firstLetter != $previousLetter) {
if($i==1){
echo "<div class="left_class">"; // open left div
}
?>
<h3 id="club-link-header"><u><?php echo $firstLetter; ?></u></h3>
<?php } ?>
<a id="club-link" href="<?php echo $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $clubs->id));?>"><br />
<?php echo $this->escape($clubs->club_name);?></a>
<?php $previousLetter = $firstLetter; ?>
<?php
if($i==25){
echo "</div>"; //close left div
echo "<div class="right_class">"; // open right div
}
if($i==50){
echo "</div>"; //close right div
}
$i++; // increment the counter variable for each loop
endforeach;
?>
The HTML:
<body>
<div id="top">
<a id="admin-link" href="/MN/public/index.php/admin/index/id/1"></a>
<div id="logged-in-as">
Hello! ric89. Logout </div>
</div>
<div id="header">
<div id="header-wrapper">
<div id="social">
<a id="fb" href="#"><img src="/MN/public/images/fb.png" /></a>
<a id="twitter" href="#"><img src="/MN/public/images/twitter.png" /></a>
</div>
<div id="nav">
<div id="nav-left">
Home
</div>
<div id="nav-middle">
<a id="clubs-link" href="/MN/public/index.php/clubs/index/id/1">Clubs</a>
</div>
<div id="nav-right">
<a id="admin-link" href="/MN/public/index.php/admin/index/id/1">Admin</a>
</div>
</div>
<div id="logo">
</div>
</div>
</div>
<div id="content">
<h1>Clubs</h1>
//database content is echo'd here, 50 items like this:
<h3 id="club-link-header"><u>5</u></h3>
<a id="club-link" href="/MN/public/index.php/club-description/index/id/1/club_id/1"><br />
5th Avenue</a>
</div>
<div id="footer">
<p id="footer-text">created & designed by Richard Knight-Gregson</p>
</div>
</body>
The CSS:
/*Content styles */
.clubs-left {
width: 450px;
}
.clubs-right {
float: right;
margin-left: 450px;
position: absolute;
width: 450px;
}
.right_class {
float: right;
width: 450px;
}
.left_class {
position: absolute;
width: 450px;
}
.clear {
clear: both;
}
Here is an image of the problem -> http://imageshack.us/photo/my-images/84/screenshot20120426at211.png/ The footer should be 100% width.
The issue is I can't float the div right without breaking the layout as the right div needs to be on top of the left in the code but doing so will break the PHP.
Any suggestions?
Thanks
Since the problem that you are describing seams to be purely cosmetic, I believe that you need to clear the float to allow the document to continue its normal rendering:
After your <div class="right_class">...</div>:
HTML
<div class="clear"></div>
CSS
.clear {clear: both;}
wouldn't something like this be more efficient?
Break up your list by alphabet to start...
var glossary=array();
var $half=(int)count($this=>clubs);
var $count=0;
foreach ($this->clubs as $clubs){
$glossary[substr($clubs->club_name, 0, 1)][] = $clubs;
}
# Start a definition list. (http://www.w3schools.com/tags/tag_dl.asp)
echo'<dl>';
foreach ($glossary as $letter => $clubs){
$count++;
$class=($count>=$half)?'float_left':'float_right';
# list all the clbs broken down by letter
echo"<dt class='$class'>$letter</dt>";
foreach ($clubs as $club)
{
echo"<dd class='$class'>
<a id='club-link' href='" . $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $club->id)) . "'>
" . $this->escape($clubs->club_name) .
"</a>
</dd>";
}
}
echo '</dl>';
and the css:
dl{
width:100%;
}
.float_left{
width:49%;
float:left;
clear:left;
}
.float_right{
width:49%;
float:right;
clear:right;
}
this way after you hit the halfway point in clubs, the dt and dd elements stack on the right side, and the list will automatically balance, no matter how many clubs you have.
It turns out the footer was inside the content div and I hadn't closed the content div properly one more extra before the footer starts was all it needed! Sorry to waste your time..