I'm a newbie about css (as you can see how bad is my webpage) and I'm having problem to put some content at the center top of the page. In my webpage I also use bootstrap, because many people told me that it make easier creating nice css. The page is a View of CodeIgniter project, so, for this reason you will see some Php code:
Home_view.php
<!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">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" src="http://fancyapps.com/fancybox/source/jquery.fancybox.css"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/source/jquery.fancybox.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/lib/jquery.mousewheel-3.0.6.pack.js'); ?>"></script>
<title>Private Area</title>
<link rel="stylesheet" href="<?php echo base_url('home_view_style.css');?>">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">
<img src="<?php echo base_url('Immagini/icon-prof.png'); ?>">
<h4>Benvenuto <!-- <?php echo $username; ?> --> </h4>
Logout
<a class="fancybox" data-fancybox-type="iframe" rel="group" href="http://www.istruzioneformazionelavoro.it/Engine/RAServeFile.php/f/corsi/84/Tabella_corsi_allegatoDD311.pdf">prova</a>
</div>
</div>
</div>
<div id="loader" style="margin-left: 300px;">
<div class="loader">
<?php echo form_open_multipart('materiale/inserisci');?>
<input type="file" name="userfile" size="20" />
<br />
<form class="form-inline">
<div class="form-group">
Nome<input type="text" class="form-control" name="Nome" size="20" />
</div>
<br />
<div class="form-group">
Descrizione<input type="text" class="form-control" name="Descrizione" size="20" />
</div>
<br />
<label for="tipo_libro"><input id="tipo_libro" type="radio" name="tipo" value="libro" checked/>Libro</label>
<br/>
<label for="tipo_guide"><input id="tipo_guide" type="radio" name="tipo" value="guide"/>Guida</label>
<br/>
<label for="tipo_video"><input id="tipo_video" type="radio" name="tipo" value="video"/>Video</label>
<br/>
<label for="tipo_animazioni"><input id="tipo_animazioni" type="radio" name="tipo" value="animazioni"/>Animazioni</label>
<br/>
<label for="tipo_registrazioni"><input id="tipo_registrazioni" type="radio" name="tipo" value="registrazioni"/>Registrazioni</label>
<br/>
<input type="submit" class="btn" value="Carica" />
<br/>
<br/>
<br/>
<br/>
</form>
<div>
<h3><span class="label label-success">Libri</span> </h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($libri as $row):
?>
<tr>
<td>
<div>
</br>
<img src="<?php echo base_url('Immagini/book.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
<h3><span class="label label-success">Guide</span> </h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($guide as $row):
?>
<tr>
<td>
<div>
</br>
<img src="<?php echo base_url('Immagini/guide.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
<h3><span class="label label-success">Video</span> </h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($video as $row):
?>
<tr>
<td>
<div>
</br>
<img src="<?php echo base_url('Immagini/video.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
<h3><span class="label label-success">Animazioni</span></h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($animazioni as $row):
?>
<tr>
<td>
<div>
</br>
<img src="<?php echo base_url('Immagini/animazioni.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
<h3><span class="label label-success">Registrazioni</span> </h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($registrazioni as $row):
?>
<tr>
<td>
<div>
<img src="<?php echo base_url('immagini/video.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
</div>
</div>
</div> <!-- end #container-->
</body>
</html>
I would like to have something similar to this:
I tried many ways, for example I tried this:
#top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
text-align:center;
}
and the use into the div , but unfortunately with no results. I ask to have patience because I'm a newbie of css, and I'm having trouble to understand. In the end, if anyone can give me also aesthetic suggests I'll be happy, in this way I'll grow even more.
Update 2:
home_view_style.css
* {
box-sizing: border-box
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-image: url("immagini/Opedia_lab_Logged.png");
background-size: cover;
font-family: "Trebuchet MS",Arial;
font-size: 14px;
}
.btn {
color: #fff;
background-color: #84ae6a;
border-color: #84ae6a;
position:absolute; // absolutely positioned
right: 100%;
}
a{
text-decoration: none;
}
#log {
margin: 60px 0px 0px 0px;
}
#log {
margin-top: 80px;
}
#log {
margin: 20px;
background: rgba(90,90,90,0.1);
border-radius: 20px;
padding: 20px;
text-align: center;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#side-nav {
padding: 20px 40px;
}
#viewport.open #side-nav, #side-nav {
width: 25%;
left: 0px;
}
#side-nav {
width: 40%;
left: -40%;
}
#side-nav {
width: 80%;
left: -80%;
-webkit-transition: 0.5s cubic-bezier(0.190,1.000,0.220,1.000);
transition: 0.5s cubic-bezier(0.190,1.000,0.220,1.000);
}
#side-nav {
position: absolute;
min-height: 100%;
top: 0px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#loader{
position: absolute;
top: 0;
left: 35%;
width: 30%;
text-align: center;
font: 14px ,Arial;
color: #5C5C5C;
background: #F2FFED;
padding: 10px;
}
/*.container {
width: 100%;
height: 300px;
background-color: rgba(255, 255, 255, .5);
position: absolute;
top: 20%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*/
/*
.container {
width: 100%;
height: 300px;
background-color: rgba(255, 255, 255, .5);
position: absolute;
top: 20%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inputs {
position: absolute;
top: 75%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.input.submit {
position: absolute;
top: 75%;
right: 70%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*/
Related
I'm trying to display the data from the database, but whenever I connect it the whole page gets repeated - from the head title to a row and then it shows the head title again as if I had split the page, and another row from the database.
I want to show the data like the products page next to each other but it only shows one and then repeats the whole page.
This is my code that I tried - the page gets repeated from the main-container and shows one row, then repeats the main container again.
<?php
require_once 'opp_data.php';
$sql ="SELECT * FROM college_opp";
$allopp =$conn->query($sql);
?>
//i dont know if i have to show the whole code but this is only the code part where everything gets repeated
<?php
while ($row = mysqli_fetch_assoc($allopp)) {
?>
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<div class="post-main-container">
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row["images"]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span><i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?></span>
</div>
<h2>"<?php echo $row["Title"]; ?>"</h2>
<p>"<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</body>
for the style.css\\
.main-container{
width: 90vw;
margin: 0 auto;
padding: 40px 0;
}
.main-container h2{
text-align: center;
padding: 90px 0;
font-size: 32px;
color: #fff;
}
.main-container p{
font-weight: 300;
padding: 10px 0;
opacity: 0.7;
text-align: center;
}
.post-main-container{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 60px;
}
.post-main-container div{
box-shadow: 0px 8px 27px -12px rgba(0, 0, 0, 0.64);
}
.post-img{
position: relative;
width: 2vw;
height: 19vw;
}
.post-img img{
position: absolute;
left: 20px;
width: 17vw;
height: 19vw;
}
.post-content{
padding: 25px;
}
.post-content-top{
background: #2b1055;
color: #fff;
opacity: 0,9;
padding: 5px 0 5px 15px;
}
.post-content-top span{
padding-right: 20px;
}
.post-content h2{
font-size: 22px;
padding: 12px 0;
font-weight: 400;
}
.post-content p{
opacity: 0.7;
font-size: 15px;
line-height: 1.8;
color: ghostwhite;
}
.button-btn a {
padding: 8px 15px;
display: block;
font-family:'Almarai', sans-serif ;
font-size: 15px;
cursor: pointer;
background: transparent;
border-radius: 20px;
width: 50%;
border: 2px solid #fff;
color: #fff;
margin: 5px auto;
padding: 0.4rem;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease-in-out;
}
.button-btn a:hover{
background:#2b1055;
}
Because your entire page is in the while loop it will duplicate the whole page multiple times. I don't know if this is exactly what you want but I suggest you doing it something like this:
<?php
require_once 'opp_data.php';
$sql ="SELECT * FROM college_opp";
$allopp =$conn->query($sql);
?>
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<?php while ($row = mysqli_fetch_assoc($allopp)) { ?>
<div class="post-main-container">
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row[" images "]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span><i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?></span>
</div>
<h2>"
<?php echo $row["Title"]; ?>"</h2>
<p>"
<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
</div>
<?php } ?>
</div>
</div>
This will only loop the post-main-container.
This is the code you are looking for
<div class="main-container">
<h2>تصفح الفرص التطوعية </h2>
<div class="post-collect">
<div class="post-main-container">
<?php
while ($row = mysqli_fetch_assoc($allopp)) {
?>
<div class="all sports">
<div class="post-img">
<img src="imgs/<?php echo $row["images"]; ?>">
<span class="category-name" data-name="sporty">كلية علوم الرياضة </span>
</div>
<div class="post-content">
<div class="post-content-top">
<span>
<i class="fa-solid fa-users-line"></i><?php echo $row["volunteer_num"]; ?>
</span>
<span>
<i class="fa-regular fa-calendar-days"></i><?php echo $row["Date"]; ?>
</span>
</div>
<h2>"<?php echo $row["Title"]; ?>"</h2>
<p>"<?php echo $row["Description"]; ?>"</p>
</div>
<div class="button-btn">
التفاصيل والتسجيل
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
I have a safety form that I'd like to highlight part of an image when an input is checked. I was able to make part of the image highlight with a hover but I can't seem to do it with CSS using Checked. Any ideas what I'm missing? If I switch the css tropic:checked to hover then it will highlight my selection. The problem is I can't get the same functionality via checked. Is it possible?
Thanks!
<style>
.check-with-label:checked ~ .product-add-image-preview {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100px;
height: 100px;
pointer-events: none;
}
.circle-with-label:checked ~ .add-head {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
.circle-with-label:checked ~ .add-head {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100px;
height: 100px;
pointer-events: none;
}
.trPic{
width:320px;
height:700px;
background: url(<?php echo base_url('uploads/front_body.png'); ?>) no-repeat;
border:5px solid #000000; }
.trPic .head{
position:relative;
top:10px;
left:100px;
width:60px;
height:30px;
background:#FF2400;
opacity:0; }
.trPic:checked .head {
opacity:0.7; }
</style>
<div align="center">
<?php if( !function_exists('form_open')): ?>
<?php $this->load->helper('form'); ?>
<?php endif;?>
<?php echo form_open(current_url(),array('id'=>'form')); ?>
<?php echo form_label('Head','head'); ?>
<input type="checkbox" name ="head" id="head" class="head" value="1"/>
<?php echo form_label('Face','face'); ?>
<input type="checkbox" name ="face" id="check_1" class="check-with-label" value="1" />
<?php echo form_fieldset_close(); ?>
<br />
<br />
<br />
<br />
<?php echo form_button(array('name'=>'submit','type'=>'submit','value'=>1,'content'=>'Submit')); ?>
</div>
<div class ="trPic">
<div class="head">
</div>
</div>
You could use jQuery and call addClass () adding the class that contains the styling you want on the event where the box gets checked.
I am newbie in HTML and CSS. I need radiobutton which locates under div. Now there's a div and radiobutton to right of.
<div class="rates">
<? foreach ($rates as $rate) { ?>
<div class="rates-block" <? if ($rate->id % 4 != 1) { ?> style="margin-left: 48px;" <? } ?>>
<img src="/images/aukc_image/<?= $rate->img ?>" class="products-img rate-img" alt="product-1">
</div>
<input class="rate-radio" type="radio" name="radio1" value="<?= $rate->count ?>;<?= $rate->price ?>">
<? } ?>
</div>
There's my CSS for thats classes:
.rates {
margin-top: 19px;
}
.rates-block {
display: inline-block;
background-color: #FFFFFF;
width: 152px;
height: 154px;
border: 1px solid rgb(220, 220, 220);
margin-left: 101px;
}
.rate-radio {
display: inline-block;
}
Now I have this
But I need something like this
Try this:
.rates {
margin-top: 19px;
}
.product-wrapper{
display: inline-block;
background-color: #FFFFFF;
width: 152px;
margin-left: 50px;
}
.rates-block {
width: 100%;
height: 154px;
border: 1px solid rgb(220, 220, 220);
}
.rate-radio {
display: inline-block;
}
<div class="rates">
<div class="product-wrapper">
<div class="rates-block">
<img src="http://www.creativeprintpack.com/images/shoppingbag4.jpg" class="products-img rate-img" alt="product-1" style="width:100%">
</div>
<input class="rate-radio" type="radio" name="radio1" value="wewe">Rate 0</input>
</div>
<div class="product-wrapper">
<div class="rates-block">
<img src="http://www.creativeprintpack.com/images/shoppingbag4.jpg" class="products-img rate-img" alt="product-1" style="width:100%">
</div>
<input class="rate-radio" type="radio" name="radio1" value="wewe">Rate 1</input>
</div>
</div>
I have added a wrapper for each product/rate, which has the width set, the div containing the image is 100% width as the input aswell
There is a specific section of my website which had broken look due to bad CSS & PHP code, which I decided to fix today. With good luck fixed a lot of it(and learned CSS along the way).
The pages I fixed have dynamic content on them - Badges like we have here on stackoverflow. Depending on user level, some people may not have any badges.
The problem is, while pages that have badges look alright, the ones which don't look entirely broken, and the rest of the content on pages shifts when there are no badges.
Any thoughts on how should I go about fixing it?
CSS:
.ms-sellerprofile {
width: 100%;
align:center;
}
.ms-sellerprofile .seller-data {
width: 100%;
display: inline-block;
align:center;
}
.ms-sellerprofile .seller-data > div {
display: inline;
float: left;
}
.ms-sellerprofile .seller-data .avatar-box-img {
float:left;
width:250px;
display: inline-block;
margin-top:10px;
margin-bottom:10px;
}
.ms-sellerprofile .seller-data div.avatar-box {
margin-left: 10px;
width:250px;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
font-size: 22px;
display: inline-block;
margin-top:10px;
margin-bottom:10px;
}
.ms-sellerprofile .seller-data .info-box {
margin-top: 10px;
margin-left: 290px;
text-align: right;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ms-sellerprofile .seller-data div.ms-badges {
border: 0;
margin-left: -240px;
margin-top: 40px;
}
.ms-sellerprofile .seller-data div.info-box p {
margin: 5px 0;
}
.ms-sellerprofile .seller-data div.info-box a {
color: #38B0E3;
text-decoration: underline;
}
.ms-sellerprofile .seller-description {
clear: both;
margin: 40px 0;
}
PHP:
<div class="ms-sellerprofile">
<div class="seller-data">
<div class="avatar-box-img"><img src="<?php echo $seller['thumb']; ?>" />
</div>
<div class="avatar-box"><?php echo $ms_catalog_seller_products; ?>
</div>
<div class="ms-badges"><?php foreach($seller['badges'] as $badge) { ?>
<img src="<?php echo $badge['image']; ?>" title="<?php echo $badge['description']; ?>" /></div>
<?php } ?>
<div class="info-box">
<?php if ($seller['country']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_country; ?></b> <?php echo $seller['country']; ?></p>
<?php } ?>
<?php if ($seller['company']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_company; ?></b> <?php echo $seller['company']; ?></p>
<?php } ?>
<?php if ($seller['website']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_website; ?></b> <?php echo $seller['website']; ?></p>
<?php } ?>
<!-- <p><b><?php echo $ms_catalog_seller_profile_totalsales; ?></b> <?php echo $seller['total_sales']; ?></p> -->
<p><b><?php echo $ms_catalog_seller_profile_totalproducts; ?></b> <?php echo $seller['total_products']; ?></p>
</div>
</div>
</div>
You should handle the exception cases explicitly.
if($var==NULL){
//html without using $var
}
else{
//html with use of $var
}
i have php program that contain div main_wrapper that div have two sub div resultwrapper and adv_right. I want adv_right div exactly right side of the resultwrapper div.When i'm use float mean that div present outside of the main_wrapper div.
<style>
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both; }
.resultitem{ float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;}
.resultleftitem{padding-left:0;margin-left:0px;}
.resultitem img{border:dotted 1px #666; padding:6px;}
.resultitem img:hover{border:solid 1px #F60;}
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; }
.resultitem a{color:#249ce9;}
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank">
<img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span>
</div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;">
</div>
</div>
Please try it,
Remove clear:both; from both div and set width what u want ,,
Please try this code you want like this ??
<style>
.resultwrapper {
margin: 10px auto 10px auto;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" />
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div>
</div>
add float:left here
<div class="resultwrapper" style="float:left;">
and rempove clear:both and add float:left
<div class="adv_right" style=" clear:both; width:15%; float:left;height:300px;
background-color:#999999;">
see demo here ....http://jsfiddle.net/6e4xN/1/
when you going to use this code it will not work with more than 7-8 elements, to work when you have more elements then use below stylesheet.
<style>
.resultwrapper {
margin: 10px auto 10px auto;
width:80%;
float:left;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:150px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
Let me know if it works for you or not.
I guess there is some problem in the code. You CANNOT use the same ID for multiple elements in a page. Secondly when you are using percent width for the adv_right div, why don't you use the same for resultwrapper div with both the resultwrapper & adv_right divs floated left and no clear:both in the css. I feel this should solve your problem.