|
CSS - Can't See Right Side Without Scrolling
Hi! I am a new member brand new to CSS. The page is my first CSS attempt and I am having problems.
The images on the right are not visible without scrolling. Thanks, Twillie Code: <style type="text/css">
body
{
background-image: url('background.png');
background-repeat: repeat-x;
background-position: top;
background-color: #cc99ff;
height: 100%;
width: 100%;
}
div.main
{
background: White;
width: 100%;
overflow: hidden hidden;
margin-left: 15%;
margin-top: 0px;
}
b.rtop, b.rbottom
{
display: block;
background: #cc99ff;
clear: both;
}
b.rtop b, b.rbottom b
{
display: block;
height: 1px;
overflow: hidden hidden;
background: White;
clear: both;
}
b.r1
{
margin: 0 5px;
clear: both;
}
b.r2
{
margin: 0 3px;
clear: both;
}
b.r3
{
margin: 0 2px;
clear: both;
}
b.rtop b.r4, b.rbottom b.r4
{
margin: 0 1px;
height: 2px;
clear: both;
}
div.logo
{
width: 100%;
height: 100%;
padding-top: 10px;
}
div.search
{
width: 100%;
height: 100%;
text-align: right;
vertical-align: top;
padding-top: 10px;
border-bottom: 1px solid #cc99ff;
}
input.search
{
margin-right: 15px;
margin-bottom: 4px;
}
div.leftmenu
{
width: 10%;
font-family: Century Gothic;
font-style: italic;
font-weight: bold;
float: left;
}
ul.leftmenu
{
list-style: none;
font-family: Verdana;
font-size: medium;
}
li.leftmenu
{
padding-top: 4px;
}
div.footer
{
width: 80%;
text-align: center;
margin-left: 30%;
margin-right: 30%;
}
div.description
{
text-align: center;
font-size: small;
padding: 4px;
}
span.description
{
font-weight: bold;
font-style: italic;
}
div.bottommenu
{
color: #FF0000;
font-size: small;
text-align: center;
padding: 4px;
}
a.bottommenu
{
color: Black;
padding-left: 4px;
padding-right: 4px;
}
div.content
{
width: 80%;
height: 100%;
float: right;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="main">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b>
<div>
<div class="logo">
<img src="images/MP_header2.jpg" alt="Monogram Plus Logo" />
</div>
<div class="search">
<input name="sp-q" type="text" />
<input name="submit" type="submit" value="Search" class="search" />
<input name="sp-a" type="hidden" value="sp0535f800" />
</div>
<div>
<div class="leftmenu">
<ul class="leftmenu">
<li class="leftmenu"><a href="index.html">Home</a></li>
<li class="leftmenu"><a href="links.html">Links</a></li>
<li class="leftmenu"><a href="online_store.html">Online Store</a></li>
<li class="leftmenu"><a href="products.html">Services</a></li>
<li class="leftmenu"><a href="faqs.html">FAQ'S</a></li>
<li class="leftmenu"><a href="catalogs_all.html">Catalogs</a></li>
<li class="leftmenu"><a href="form_online_quotes.html">Quick Quote</a></li>
<li class="leftmenu"><a href="forms.html">Forms</a></li>
<li class="leftmenu"><a href="about_us.html">About Us</a></li>
<li class="leftmenu"><a href="contact_us.html">Contact Us</a></li>
<li class="leftmenu"><a href="sitemap.html">Site Map</a></li>
</ul>
</div>
<div class="content">
<div style="float: left; width: 700px;">
<div style="float: left; width: 380px;">
<div style="float: left;">
<div style="padding-bottom: 10px;">
<a href="spirit.html">
<img src="mplus/images3/Index_spirit_pict2.jpg" alt="Spirit" style="width: 239px; height: 246px;
border: 0px;" /></a>
</div>
<div style="color: Red; font-size: large; width: 239px; text-align: center;">
<a href="web_service.html" style="color: Black; font-size: large; font-weight: bold;">
Need an Online Store for your club or business?</a>
<br />
We create FREE Custom Apparel Stores!
</div>
</div>
<div style="width: 100px; text-align: center; float: right;">
<a href="business_wear.html">
<img src="images/logowear_sm.jpg" alt="Starter Special" style="width: 132px; height: 83px;
border: 0px;" /></a> <a href="starter_special.html">Embroidered Logo Shirts Starter
Special<span style="color: Red;">-ONLY $85!</span></a>
</div>
</div>
<div style="float: right; font-size: medium; width: 270px;">
Phone/ Fax: (518) 374-5220<br /><br />
1819 State Street<br />
Schenectady, NY 12304<br />
<p style="font-size: small; font-style: italic;">(3 Buildings east of Blue Ribbon Diner)<br />
Parking: Right at our front door or in shared lot to the right of our building.</p><br /><br />
Hours: Mon-Fri 9:00 - 5:00 EST<br />
<p style="font-size: small; font-style: italic;">Weekend and After Hours happily by Appointment</p><br />
</div>
</div>
<div style="float: right; text-align: center; padding-right: 20px;">
<a href="/wool_jackets.html" style="display: block;">
<img src="images/w_guild_front_sm.jpg" alt="Guild Front" style="width: 109px; height: 112px;
border: 0px;" /></a> <a href="blanket.html" style="display: block;">
<img src="images/Blanket_sweat_red.jpg" alt="Blanket Sweat Red" style="width: 136px; height: 92px;
border: 0px;" /><div>
Sweatshirt Blankets</div>
</a><a href="wool_capital.html" style="display: block;">
<img src="mplus/images3/w_SHS_back_sm.jpg" alt="SHS Back" style="width: 122px; height: 112px; border: 0px;" /></a>
Capital District NY
</div>
</div>
</div>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
<div class="footer">
<div class="description">
Since 1981, <span class="description">Monograms Plus</span> has been providing high-quality
imprinted sportswear in Schenectady, NY. We offer custom screen printing and embroidery
to the community at large, with friendly customer service, quality custom work,
and competitive pricing. Come by and get your school, business or company apparel.</div>
<div>
<div class="bottommenu">
<a href="/index.html" class="bottommenu">Home</a>| <a href="/about_us.html" class="bottommenu">
About Us</a>| <a href="/online_store.html" class="bottommenu">Online Store</a>|
<a href="/products.html" class="bottommenu">Services</a>| <a href="/search.html"
class="bottommenu">Search</a>| <a href="/faqs.html" class="bottommenu">FAQ's</a>|
<a href="/contact_us.html" class="bottommenu">Contact Us</a>| <a href="/links.html"
class="bottommenu">Links</a>| <a href="/return_policy.html" class="bottommenu">Returns</a>|
<a href="catalogs_all.html" class="bottommenu">Catalogs</a>
</div>
</div>
<div style="font-size: small; text-align: center; padding: 4px;">
Monograms Plus All rights reserved. Updated 7/04/11</div>
</div>
</body>
</html>
Similar TutorialsThanks for taking time to read my question. How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture) eg: ______ |1|2|3| |_|_|_| instead of ________ |1||2||3| |_||_||_| Thanks, Brad Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! Hi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn. I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it. Code:
html:
<div id="contentColumn">
<div class="inside">
<!-- middle column content begin -->
<p class="blocktext">
<?php mosLoadModules( 'banner', -1 ); ?>
</p>
<div id="users">
<?php mosLoadModules ( 'user1' ); ?>
</div>
<div id="users">
<?php mosLoadModules ( 'user2' ); ?>
</div>
<p>
<div id="nofloat">
<?php mosLoadModules ( 'top' ); ?>
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'bottom' ); ?>
</div>
css:
/*top users */
#users {
float:left;
width: 300px;
}
#nofloat {
float: none;
}
So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same. My question is what can I do to make this content show after the side by side div's and not beside it in both browsers? You can see what I mean by looking at this test site in both IE 6 and FireFox. http://www.wii-volution.com/testbed/ Thanks for any help you guys can give me! Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white. And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things. How can I fix this problem? Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!! http://yourbestproduct.com/test.html CSS CODE: body { text-align: center; } #container { width: 800px; margin: 0 auto; } #sub_title { background-color: #E6E6E6; background-repeat: repeat; padding: 2px; width: 796px; color: #848484; } .left { float : left; margin-left: 10px; } .right { float : right; margin-right: 10px; } HTML CODE: <div id="container"> <div id="sub_title"> <div class="left">Left Message</div> <div class="right">Right Message</div> </div> </div> Hi. I'm a design student working on a website for my boss, and I've come across a problem and was wondering if someone could help me out. It might be a simple fix, but I can't seem to figure it out. I have a body wrapper div (subtitle, body text, etc) on the left that's approx. 705 px wide and a vertical navigation bar div on the right that's about 240 px wide. I've tried floating the body wrapper left and the navigation buttons right, but one always ends up sitting below the end of the other. When I use the "clear right" or "clear left" commands, it doesn't help. Any ideas what I could do to get them to line up on the top? I want them to sit next to one another. Thank you very much for any ideas! Britta Hey, I'm not entirely sure why this is happening, you can see it here and the css So I'm not really new to CSS or HTML though I might as well be considering the last time I did anything in either that had much substance was a class back in high school, about 6 years ago. This is what I want... DIV1 --------------- DIV2 --------------- DIV 3 2 would be in the center with 1 and 3 floating left and right respectively. Instead I'm getting this... DIV1 --- DIV2 ----------------------------------------- DIV 3 or DIV1 DIV2 DIV3 ...I hope you guys get the idea. I'm having trouble figuring it out. My ext CSS sheet, if you care to look, is he http:// livingway.110mb. com/mainstyle.css the frame in question, he http:// livingway.110mb. com/main.htm I'm hoping it'll let you all look at them. It's nothing professional yet because I'm only trying to give an update idea to our "webmaster". Anywho, let me know what I'm doing wrong. My brain hurts right now. I've been having some issues getting a design for a site I'm co-authoring to display correctly using CSS. I know that what I'm trying to do should be possible, but I haven't been able to figure it out and am getting pretty damn frustrated with the whole thing. I could probably do it with tables, and right now I have it set up with some javascript that I threw together, but css+divs would be the ideal solution. Anyways, this is basically what I want to try and do (that's the javascript version). Just resize the window a bit to see what i'm getting at. Here's the source: Code: <!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
<!--
#leftpane {
float: left;
height: 100%;
border: 1px solid black;
}
#rightpane {
float: right;
height: 100%;
border: 1px solid black;
}
-->
</style>
<script type="text/javascript">
<!--
// get rid of all this javascript and figure out a way to do this with css
var windowWidth = 800;
window.onload = function() {
getWindowSize();
resizeLeftPane();
}
window.onresize = function() {
getWindowSize();
resizeLeftPane();
}
function getWindowSize() {
if(window.innerWidth) {
windowWidth = window.innerWidth;
} else if(document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else if(document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
function resizeLeftPane() {
var rightpaneWidth = document.getElementById('rightpane').offsetWidth;
var margin = 10;
document.getElementById('leftpane').style.width = String(windowWidth - rightpaneWidth - margin * 3) +'px';
}
//-->
</script>
</head>
<body>
<div id="leftpane">
<p>this pane needs to stretch as wide as it can while leaving room for the image at right, whose width is arbitrary</p>
</div>
<div id="rightpane">
<img src="http://movingboxstudios.com/testz0rz/images/box.jpg" height="100%" alt="image" />
</div>
</body>
</html>
Basically I need a way to have 2 elements next to eachother, 1 of which is an arbitrary size and the other be wide enough to fill the rest of the containing block. Any help would be much appreciated. EDIT: Here's a link to the actual working design, maybe that'll help in understanding my question (don't open it in IE unless you want a facefull of ugly). Hey guys! Usually if you make a table and then make another table, the other table will be located below the table before. I want them to be side by side. So I tried this CSS value : table { display : inline; } then it worked, but the problem is, that if the tables have different sizes, the smaller one is not aligned to the top and looks smaller than the table before it. I want them all to be aligned to the top. I tried vertical-align:top and valign="top", but they still don't work... Is there any other way to make tables have no line breaks before and after the table? Is there any other property that controls the line breaks of the table? I tried display:table-cell , but the problem is still the same. thanks I'm working on a site which has a header and footer div, and in the main section in between, it has a narrow left div and main content to the right. I've got the overall width centered at 90%, and I want the left div to be 250px wide, and then the right main content div to be the remaining width of the 90%. I also want to make sure it doesn't resize below about 600px when the screen is resized. Am I better off setting a fixed width of the overall width instead of a percentage? That way I can make the page about 800px wide, left pane 250px, and main content 550px? Any other thoughts? Thanks. Hello, I have a problem that is making me crazy! I have a simple page with some news on it. Every news is a <div> and contains two floating blocks: Image(floating left) and the text(also floating left). These blocks must stay side by side and NOT one over the other. The width of the news <div> can be 500-550px max for layout reasons. If the text is longer than the space available Firefox moves the entire text block under the image, while IE resize correctly the text block. I have tried to apply diplay:inline; to both blocks with no effect. Here is the test page Link (I have limited the width to 500px to simulate the real layout.) CSS: Code:
.news {
float: left;
clear:left;
margin: 0 0 1em 0;
width: 100%;
}
.img_hl {
float:left;
margin-right: 10px;
}
.newstext {
padding-top: 1em;
float:left;
}
Please help me!! -- Bye Redhawk Hi Guys, I'm working on a form, and for the life of me, I can't get these divs to sit side by side. You can see the test page at www.details.at/search_test.cfm It's a small form with a few fields and selects I want each element to sit side by side in a single row. Here is the code. I thought display:inline; would do the trick, but it's not working. Code: <style>
#control_panel
{
padding:0 0 1em 2em;
width:600px;
float:left;
}
.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
}
.input
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
label
{
text-align: left;
display: block;
}
div.search_cell
{
display: inline;
}
</style>
<div id="control_panel">
<form action="http://test.at" METHOD="post">
<div class="search_cell">
<INPUT class="input" NAME="search_box" value="" size="25" maxlength="200">
<label for="search_box"><span class="smalltext">search</span></label>
</div>
<div class="search_cell">
<select class="input" name="range">
<option value="50">50</option>
<option value="Any">Any</option>
<option value="1" >1</option>
</select>
<label for="search_box"><span class="smalltext">within</span></label>
</div>
<div class="search_cell">
<select class="input" name="range_measure">
<option value="Miles">Miles</option>
<option value="kilometers">Kilometers</option>
</select>
<label for="search_box"><span class="smalltext">range</span></label>
</div>
<div class="search_cell">
<span class="smalltext">of</span>
</div>
<div class="search_cell">
<INPUT class="input" value="" type="Text" name="location" size="10">
<label for="location"><span class="smalltext">city & state or postal</span></label>
</div>
<div class="search_cell">
<INPUT class="input" type="submit" name="Submit" value="Go">
</div>
</form>
</div>
</div>
i have two divs that are side by side and i want them to have the same height, but i will not know the height ahead of time as the content for at least one of the divs is dynamic (calendar list) and can contain no items up to as many items as there are time intervals in a day. the html for the section in question is Code: <div id="spotlight-wrapper">
<div class="spotlight">
<h3>Currently...</h3>
<div id="training" class="spotlight-sub">
<ul>
<li><strong>Running</strong> 3mi/4mi/3mi</li>
<li><strong>Bench Press</strong> 175lbs</li>
<li><strong>Deadlift</strong> 205lbs</li>
<li><strong>Squats</strong> 275lbs</li>
</ul>
</div>
<ul class="inline-list">
<li>
<a href="http://www.randomhouse.com/features/crichton/airframe/" title="Random House Publishing: Airframe">
<img src="/images/reading.png" alt="Airframe by Michael Crichton" />
</a>
</li>
<li>
<a href="http://www.google.com/musicl?lid=HnJbFL6nobL&aid=lqUKIAaw6tN&sa=X&oi=musiamp;c&ct=result" title="Google Music: Hinder - Extreme Behavior">
<img src="/images/listening.png" alt="Extreme Behavior by Hinder" />
</a>
</li>
<li>
<a href="http://en.wikipedia.org/wiki/300_(film)" title="300 the movie on Wikipedia">
<img src="/images/movie.png" alt="300 - Tonight We Dine In Hell" />
</a>
</li>
<li>
<a href="http://www.fox.com/house/" title="Fox's House M.D. starring Hugh Laurie">
<img src="/images/television.png" alt="House M.D. on Fox" />
</a>
</li>
</ul>
</div>
<div class="spotlight">
<h3>In the public...</h3>
<div id="calendar">
<ul id="events">
<li>
<strong>09/25 20:00 - 09/25 21:00</strong>
<br />House MD
</li>
<li>
<strong>09/26 16:00 - 09/26 17:00</strong>
<br />Weekly Tempo Run
</li>
<li>
<strong>09/26 17:30 - 09/26 18:30</strong>
<br />RPM (Christi)
</li>
<li>
<strong>09/27 06:00 - 09/27 07:30</strong>
<br />Weight Training
</li>
<li>
<strong>09/28 06:00 - 09/28 07:30</strong>
<br />Weight Training
</li>
<li>
<strong>09/28 08:30 - 09/28 09:30</strong>
<br />RPM (Lauren)
</li>
<li>
<strong>09/29 07:30 - 09/29 09:30</strong>
<br />Long Run
</li>
</ul>
</div>
</div>
</div>
and my unsuccessful attempt at the necessary css Code: div#spotlight-wrapper {
min-height: 317px;
}
div.spotlight {
width: 471px;
height: 100%;
float: left;
margin: 19px 12px 7px 0;
background: #373737;
overflow: hidden;
}
div.spotlight h3 { background: #555555; margin: 0; padding: 7px; }
here is a live sample i have two divisions that i have been able to set side by side, using display:inline; but i want the left div to appear on the far left and the right div to appear on the far right. except i cant get it to work. Code:
<script type='text/css'>
.left {
display:inline;
margin-left:3px;
width:30%;
}
.right {
display:inline;
margin-right:3px;
width:70%;
}
</script>
<div class='left'>Left column</div><div class='right'>Right column</div>
with the code example above the divs seem to be right aligned. any ideas? given the following structu #container { width:775px; margin:0px auto; background-color:#fff; border-left:2px solid #424242; border-right:2px solid #424242; border-bottom:2px solid #424242; border-top:2px solid #424242; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #nav { padding:0px; height:100px; background-color:#4E7395; background-image:url(nav.jpg); background-repeat:no-repeat; background-position:top left; } #masthead { padding:0px; height:200px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#E6E6E6; border-bottom:4px solid #4e7395; } #leftnav { float: left; width: 375px; margin-left:0px; padding:0px; background-color:transparent; } #rightnav { clear:right; float: right; width:392px; margin-right:0px; padding:0px; background-color:transparent; } Would it be possible to put text paragraphs side by side inside the rightnav <div> Floating the text in that manner, it would appear that there were two mini-columns, instead of just the one. Is that possible? thanks a million jon hi all... i been having some trouble with this one, perhaps someone can guide me in the right direction... Code:
.left_top{
width:10px;
height:100px;
border:1px solid white;
background-color:red;
margin:0px;
padding:0px;
float:left;
overflow:scroll;
}
.middle_top{
width:10px;
height:100px;
border:1px solid blue;
background-color:red;
margin:0px;
padding:0px;
overflow:scroll;
}
.right_top{
width:10px;
height:100px;
border:1px solid pink;
background-color:red;
margin:0px;
padding:0px;
overflow:scroll;
float:right;
}
thats the code, it should be pretty clear as to what i'm trying, but here goes anyway... i want the 3 divs to align side by side, in this order left/middle/right. they are inside a <td> but it makes no difference if i make that a <div>... please help me out... frank/ Hey there, I'm having issues lining up information side by side with ul and li tags. If you look at the link below, then scroll down a bit, you'll see some brief info for that property, such as Price, Bedrooms, Baths, etc., then below that the rest of the brief bits, such as City, Locale, Subdivision, etc. Ideally, I these two blocks of info to be on the same line, parallel with each other. Any ideas? http://www.groundedgroup.com/client...or-sale/554421/ Thank you. I am having a little difficulty with aligning two divs. I have one 800 wide div that has the site content...it needs to be centered at all times. The second div is 160 wide and I want it at the same height as the first, but ten pixels to its right. This image should visually show it: I have tried absolute position 50% 0% for the first with the second as relative..and it overlays it...treid different combinations of float as well. What am I doing wrong? Thanks in advance I should preface this by stating that I'm hopelessly bad at CSS! I have a bit of ajax-enabled html like this: Code: <div class="demo">
<div class="demo-description">
<p>Vault</p>
</div>
<ul id="sortable1" class="connectedSortable">
<li id="entry_1" class="ui-state-default ui-state-disabled"><img src = "img/1.jpg"></li>
</ul>
<div class="demo-description">
<p>Gallery One</p>
</div>
<ul id="sortable2" class="connectedSortable">
<li id="entry_4" class="ui-state-default"><img src = "img/4.jpg"></li>
<li id="entry_2" class="ui-state-default"><img src = "img/2.jpg"></li>
</ul>
<div class="demo-description">
<p>Gallery Two</p>
</div>
<ul id="sortable3" class="connectedSortable">
<li id="entry_3" class="ui-state-default"><img src = "img/3.jpg"></li>
<li id="entry_5" class="ui-state-default"><img src = "img/5.jpg"></li>
</ul>
</div><!-- End demo -->
I want to format it such that while images [<li></li>] within galleries [<ul></ul>] appear side by side, the actual galleries appear one below the other. Just can't seem to figure it out. Edit: Nevermind. As soon as I posted, I discovered what I needed was "overflow: auto;" Isn't it always the way. |
|||||||