I am very new to CSS. please go easy on me.
I am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. Where am I going wrong?
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011 Hussmann Corporation and Franwell, Inc.
</div>
</body>
</html>
You can set the width of the autogenerated iframe. This will force the SurveyMonkey iFrame to be smaller.
http://jsfiddle.net/H6WNP/
iframe { width: 250px !important; }
I just gave you a generic answer because your post is missing a lot of html that corresponds to your CSS. I think this is what you are after though.
Related
I've been trying out materialize and when working on the nav bar, depending on how long the logo is, it will overflow outside the div as shown in the snippet if you were to shrink the window. How would you fix this?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Quiz Manager</title>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper">
Test Brand Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</header>
</body>
Add the following to your script:
$(document).ready(function () {
$('.sidenav').sidenav();
});
I am designing the Bootstrap form. I wanted to make the block responsive.
Code:
<div class="main_txt">
<div class="main_row_sep" >
<div class="main_service main_auto" >
<h4>
<a title="Automotive" href="searchcat1.aspx?cat=Automotive">Automotive</a></h4>
<p>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Auto Spare Parts">Auto
Spare Parts</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Commercial Vehicles">
Commercial Vehicles</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Oil value Lubricants">
Oil value Lubricants</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Tyres and Batteries">
Tyres and Batteries</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Automotive Tools">
Automotive Tools</a>
<span class="right">more ...</span></p>
</div>
<div class="main_service main_build" >
<h4>
Building and Interiors</h4>
<p>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Aluminum and Steel Profiles">
Aluminum and Steel Profiles</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Bathroom and Kitchen Equipment">
Bathroom and Kitchen Equipment</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Cables and Electrical">
Cables and Electrical</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Hardware and Tools">
Hardware and Tools</a>
<span class="right"><a href="searchcat1.aspx?cat=Building and Interiors">more
...</a></span></p>
</div>
</div>
</div>
CSS:
.main_service {
width:254px;
height:136px;
float:left;
padding:20px 20px 0 90px;
}
.main_auto {background:url(images/category/auto.gif) no-repeat;}
.main_build {background:url(images/category/build.gif) no-repeat;}
.main_row_sep {
width:100%;
}
I am not getting how to apply grid system to div tag so that it becomes responsive.
first add bootstrap
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
then replace your HTML code with this one
<div class="container">
<div class="row" >
<div class="main_auto col-md-6" >
<h4>
<a title="Automotive" href="searchcat1.aspx?cat=Automotive">Automotive</a></h4>
<p>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Auto Spare Parts">Auto
Spare Parts</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Commercial Vehicles">
Commercial Vehicles</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Oil value Lubricants">
Oil value Lubricants</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Tyres and Batteries">
Tyres and Batteries</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Automotive Tools">
Automotive Tools</a>
<span class="right">more ...</span></p>
</div>
<div class="main_build col-md-6" >
<h4>
Building and Interiors</h4>
<p>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Aluminum and Steel Profiles">
Aluminum and Steel Profiles</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Bathroom and Kitchen Equipment">
Bathroom and Kitchen Equipment</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Cables and Electrical">
Cables and Electrical</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Hardware and Tools">
Hardware and Tools</a>
<span class="right"><a href="searchcat1.aspx?cat=Building and Interiors">more
...</a></span></p>
</div>
</div>
</div>
you can see that 3 classes been added ( container, row , col-md-6 )
here's a link to see the result https://jsfiddle.net/3ypn1g9k/
you can always visit https://getbootstrap.com for more information about Bootstrap and customize your code the way you want
I hope this is want you want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
<style>
img{
border:5px solid grey;
width:100%;
height:100%;
}</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check: https://jsfiddle.net/8pn27vhL/5/
I have this pretty neat slider, and would love to have it work in some way or another with bootstrap. Can I simply add it or does it require a lot of customization?
It is really easy to use and looks good on any site and automatically resizes ect so I am not to sure what to do with it.
I don't want to start playing with it if there is a simply way or alternative out there?
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
<meta name="Description" content="Test"/>
<meta name="Keywords" content="Test"/>
<link href="style2.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/slider.css" />
<script src="js/modernizr.custom.63321.js"></script>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet">
</head>
<body>
<div id="mi-slider" class="mi-slider" style="left: 0px; top: 0px">
<ul>
<li><img src="images/1.jpg" alt="img01"><h4>slasssgs</h4></li>
<li><img src="images/2.jpg" alt="img02"><h4>Oxforssds</h4></li>
<li><img src="images/3.jpg" alt="img03"><h4>Loafesssrs</h4></li>
<li><img src="images/4.jpg" alt="img04"><h4>Sneaksssers</h4></li>
</ul>
<ul>
<li><img src="images/5.jpg" alt="img05"><h4>slasg</h4></li>
<li><img src="images/6.jpg" alt="img06"><h4>Hassts & Caps</h4></li>
<li><img src="images/7.jpg" alt="img07"><h4>Sunglassssssses</h4></li>
<li><img src="images/8.jpg" alt="img08"><h4>Scssarves</h4></li>
</ul>
<ul>
<li><img src="images/9.jpg" alt="img09"><h4>ssssss</h4></li>
<li><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></li>
<li><img src="images/11.jpg" alt="img11"><h4>Sport</h4></li>
</ul>
<ul>
<li><img src="images/12.jpg" alt="img12"><h4>sssss</h4></li>
<li><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></li>
<li><img src="images/14.jpg" alt="img14"><h4>Laptossssssp Bags</h4></li>
<li><img src="images/15.jpg" alt="img15"><h4>Briefsssscases</h4></li>
</ul>
<nav>
Limos
Coaches
Minibuses
Executive cars
</nav>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.catslider.js"></script>
<script>
$(function() {
$( '#mi-slider' ).catslider();
});
</script>
</body>
</html>
You have to include the bootstrap libraries in your html head and at the bottom of your body
Bootstrap pages usually look like the example in the snippet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text-css">
.example {
min-height: 400px;
background-color: #333333;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 example">
<p>This is column 1</p>
</div>
<div class="col-md-4 example">
<p>This is column 2</p>
</div>
<div class="col-md-4 example">
<p>This is column 3</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
And the Bootstrap template is based on the 12-grid, so every row has a maximum of 12 columns (as default). For YOUR purposes, you can put your code inside the container-fluid, place the jquery library link on the bottom, and it would work.
i need help with responsive image when orientation change.
When mobile change to landscape mode, show white space inside page wrapper just after image, creating a space between image and fixed footer.
When click on a button panel image fix.
html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/app-theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="css/index.css" />
<title>Elephant</title>
</head>
<body>
<div class="app">
<div data-role="page" id="pageone" data-title="Elephant" data-url="pageone">
<!--Menu Panel-->
<div id="menu-panel" data-role="panel" data-position="left" data-display="push" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li data-icon="search"><a data-rel="close" href="#pageone">Search</a></li>
<li data-icon="cloud"><a data-rel="close" href="#pageone">Weather</a></li>
<li id="location-btn" data-icon="location"><a data-rel="close"
href="#pageone">Location</a></li>
<li data-icon="camera"><a data-rel="close" href="#pageone">Camera</a></li>
<li data-icon="gear"><a data-rel="close" href="#pageone">Configuration</a></li>
</ul>
</div>
<!--/ Menu Panel-->
<!--Actions Panel-->
<div id="overlay-panel" data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li id="camera-btn" data-icon="camera"><a data-rel="close" href="#pageone">Photo</a></li>
<li data-icon="video"><a data-rel="close" href="#pageone">Video</a></li>
<li data-icon="audio"><a data-rel="close" href="#pageone">Audio</a></li>
<li data-icon="alert"><a data-rel="close" href="#pageone">File</a></li>
</ul>
</div>
<!--/Actions Panel-->
<header id="page-header" data-role="header" data-position="fixed">
<a id="menu-btn" href="#menu-panel" data-role="button"
data-rel="close" data-icon="bars" data-iconpos="notext">Menu</a>
<h1>
<div id="spinner" class="visually-hidden ui-loader"></div>
<span class="visually-hidden">Elephant</span>
</h1>
<a href="#overlay-panel" data-role="button" class="ui-btn-right"
data-icon="bullets" data-iconpos="notext">Media</a>
</header>
<div id="main-content" role="main" class="ui-content">
<div class="ui-grid-solo">
<div id="photos-container" class="ui-block-a">
<img style="display: block;" id="smallImage" src="img/test.jpeg" />
<!-- <img style="display: none;" id="largeImage" src="" /> -->
</div>
</div>
</div>
<footer id="page-footer" role="contentinfo" data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
css:
#photos-container {
width: 90%;
margin-left: 5%;
}
#photos-container img {
max-width: 100%;
}
Thank you very much
Regards
Thanks for your attention.
Error comes calculating min-height. I fixed it writting:
#media screen and (orientation: landscape) {
.ui-mobile .ui-page {
min-height: 0 !important;
}
}
Regards
Heres the link to the page In question....
http://team2648.com/OTIS2/DivTest.html
So If you look at that page, If your browser is small enough, you see that below the box with the red background, there is a bit of space, Why doesn't the box below float up?
The HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OTIS v1.5</title>
<!-- Javascript - Fix the flash of unstyled content -->
<script type="text/javascript"></script>
<!-- Stylesheets -->
<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styling.css" rel="stylesheet" type="text/css" media="screen" />
<!--Validation-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/common.js" type="text/javascript"></script>
<!-- Meta Information -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Techplex Engineer" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10899272-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="header-in">
<h2>Online Team Information System</h2>
<h6>A Web Database Application for Team Profile Management</h6>
</div> <!-- end #header-in -->
</div> <!-- end #header -->
<div id="content-wrap" class="clear lcol"> <!-- Navigation Column-->
<div class="column">
<div class="column-in">
<ul>
<li> My </li>
<ul>
<li> Dashboard </li>
<li> Profile</li>
<li> Information</li>
<li> Emergency Contact</li>
</ul>
<li> Management </li>
<ul>
<li> Users </li>
<li> Email </li><li> Blog </li>
</ul>
<li> Report a Bug </li>
<li> Logout </li>
</ul>
<br />
Logged in as:
<br />
Blake
</div>
</div>
<div class="content">
<div class="content-in">
<h5>Welcome to your personal dashboard Blake </h5><hr id="hr1"/>
<div id="bio" style="display: none;">
Your current Bio: <br/><textarea rows="10" cols="50"> </textarea>
</div>
<div id="profilestats" class="widget">
<strong>IMPORTANT</strong><br/>
<ul style="padding-left: 10px;">
<li>Your Public Profile is pending moderation.</li>
</ul>
</div>
<div id="cal" class="widget">
<!-- <iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&mode=AGENDA&height=200&wkst=1&bgcolor=%23FFFFFF&src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&color=%235229A3&ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>-->
<iframe src="https://www.google.com/calendar/hosted/team2648.com/embed?showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=200&wkst=1&bgcolor=%23FFFFFF&src=team2648.com_a1ur39fpp2cn076ak2q06o8hhc%40group.calendar.google.com&color=%235229A3&ctz=America%2FNew_York" style=" border-width:0 " width="400" height="200" frameborder="0" scrolling="no"></iframe>
</div>
<div id="stats" class="widget"><!-- and finally output the information formated for the widget-->
<strong>You have:</strong><br/>
<ul style="padding-left: 10px;">
<li> <strong>42</strong> of 30 fundraising hours<br/></li>
<li>fundraised $<strong>160</strong> of $300<br/></li>
<li> <strong>3</strong> of 5 community service hours<br/></li>
<li> <strong>0</strong> of 40 build hours <br/></li>
</ul>
</div>
<div id="logins" class="widget">
<form name="controlsForm">
<input id="cblogin" type="checkbox" name="loginbox" onClick=""/> Disable Login<br />
<input id="cbreg" type="checkbox" name="regbox" onClick=""/> Disable Registration<br />
</form>
</div>
<div class="clear"></div>
</div><!-- end .content-in -->
</div> <!-- end .content -->
</div> <!-- end #content-wrap -->
<div id="footer">
<div id="footer-in">
This system was designed, built and is maintained by Blake for Infinite Loop Robotics <br>OTIS(Online Team Information System) © 2010 Techplex Labs </div> <!-- end #footer-in -->
</div> <!-- end #footer -->
</div> <!-- end div#container -->
</body>
</html>
You can view the css here:
http://team2648.com/OTIS2/css/styling.css
but the relevant part is this:
div.widget{
width: 200px;
float: left;
/* text-align: center;*/
border: 1px solid black;
padding: 8px;
margin: 8px;
/* margin-left:8px;
font-weight:400;*/
-moz-border-radius:11px;
-khtml-border-radius:11px;
-webkit-border-radius:11px;
border-radius:5px;
background:#fff;
border:2px solid #e5e5e5;
-moz-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow:rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow:rgba(200,200,200,1) 0 4px 18px;
box-shadow:rgba(200,200,200,1) 0 4px 18px;
/* padding:16px 16px 40px;*/
}
div#disclaimer
{
margin-top: 10px;
border: 1px dotted black;
font-size:10px;
background-color: #D7D7D7;
}
div.clear
{
clear: both;
}
div#profilestats
{
border:2px solid #FF9999;
}
div#cal
{
width: 400px;
padding-bottom: 0px;
}
I don't know if you have this as you like, but with the comments, I see when you make the full window smaller, the box with the calendar in it (cal) moves below the red Important box (profilestats).
IF you wish this to be closer (close the gap between these) what is causing the space is the DIV.widget in styling.css, margin:8px; besides that, I see nothing causing space at this point with that change - I tested this in IE8 and removing that CSS element setting did indeed push them directly conjunctual with no space between.
Now if what you mean is moving the "stats" up directly below the "profilestats" then that is another matter which can be resolved a couple of different ways.
put "profilestats" and "stats" in a div together (with "cal" and "logins" in
another div together, and float both "container" divs left.
Use the float:left and float: right on the left and right
elements, but that will introduce a space between if the width is
extended (browser width) unless addressed through additional css.
In this case, I would opt for #1 as the css is easier to control.
NOTE: be cautious of margins on IE6 in float left elements at times it can be inconsistent.
The reason why this happening is because both profilestats div and cal div are float:left. Try a float:right; on cal div so that the next div which is floated left(stats) can take the available space below profilestats.