Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image / text offset need help

    I'm trying to get this site up and running. I'm not an html/css techie by any stretch. I can get it to do most things but this one has got me 'frazzled.

    The page in questions is http://aljones.us/630904vad.php
    the related css can be found at http://aljones.us/css/3col2.css (this is my most recent second attempt at this!)

    The text related to these images is shorter than the image and the next image is offset to the right. Obviously, what I want if for the images to flow down the page with the associated text to the right or the images.

    Any suggestions very much appreciated. Any other comments gratefully accepted.
    //al
    Last edited by aljones; 09-24-2012 at 08:04 PM.

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    The floats are carrying over. Try adding clear:both to the images that need to be on the left. That should break them out of the previous float.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The current html looks like:
    Code:
    <a href="images/630910vad.jpg">
    	<img alt="photo of this letter" src="images/630910vad_1.jpg" class="left-top" ></a>
    	<h3>Thu. Sept. 10, 1863</h3>
    	<p class="indent">Went over to the 106 regt today. Saw lots of boys that I was acquainted with. Saw Horis Pickett had a good visit with him.</p>

    The current css looks like this:
    Code:
    .left-top {
    	float: left;
    	margin: 5px 20px 10px 10px; 
    	padding: 4px; 
    	border: 1px solid #C4DBEA;
    }
    Adding clear: both; leaves the text intact where it is (aligned on the left, of course) and throws the images to the bottom of the page.
    I've been over this, as the expression goes, seven ways from Sunday and can't make it behave!

  • #4
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    The problem is that the text is too short and the next image floats to the previous image.

    It is probably not possible to have the text consistently the same height as image. so each set of images an text should be a separate unit.

    I'm not sure why you are floating them. if you just use a natural flow, the blocks should just line up one under the other.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #5
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    [QUOTE=COBOLdinosaur;1273038]The problem is that the text is too short and the next image floats to the previous image.[quote]
    Yep, that's the problem, g-g-g-randpa didn't write as much some days.

    It is probably not possible to have the text consistently the same height as image. so each set of images an text should be a separate unit.
    It's rare that they're the same height - or even close - some days he got verbose, other days he didn't say much of anything.

    I'm not sure why you are floating them. if you just use a natural flow, the blocks should just line up one under the other.
    They don't ... that's been my problem with this all along. At best, I get what you see there now. At worst they're completely disassociated. The natural flow (no clear / no float) puts the image with the associated text *under* the image.
    I've been working with this site for a couple of years now; nothing that I've tried will come anywhere close to what I'm trying to achieve.
    I'm real willing to let the various browsers operate as they will - but if you've looked at the page, that's just not acceptable. And simply, *I* can't come up with a workable solution.
    Last edited by aljones; 09-24-2012 at 10:54 PM.

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    <DL> perhaps?

    Wonder if CSS3 <figure><figcaption> elements would be of use to you? See for example http://html5doctor.com/the-figure-figcaption-elements/

    Cannot recall the particulars, but Dan Cederholm's "Bulletproof Web Design" had a wonderful bit using Definition Lists <dl><dd>-</dd><dt>-</dt></dl> to hang text and images together.

  • #7
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    waxsoc, I've looked at caption since I do have several pictures that I'll add to the letters - but they'll be out of the flow of the messages and caption comes in real handy.
    I found a couple of articles on using dd/dt and if I could use it for the diraies but I use the same css for both the diary entries and the letters - trying to keep life simple. If I were willing to let the letters flow down the right hand - it might be workable, but some of them get longish and it's better for them to wrap the image.
    I could also put the individual pages up as separate entries - then there's no problem; again there are cases where I'm putting up 3 and four pages per letter and diary entry - that would make my "table of contents" to the left a lot worse than it already is.
    (( Have to think on this ... if the toc points to the first entry for a date, then use next / previous to go to the next page ... not what I want, but it does solve the problem ))
    I also have code in hand that does solve some of the problems but it has some other quirks - like the second diary entry slides below the image ... argh.
    I may sound like I'm playing "yes, but" with you all but I've been trying to get this site lined out right in my spare time for a couple of years; I'm now retired and have the time to dedicate to it and would like to have it look right. I've gotten several comments from school kids (through college level) who have been on site and reading so I have the incentive to get it done, but I want to get it done right ( which involves having it look reasonably like I want it to look

  • #8
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Slight change to my problem.
    I now have the diaries and letters laying out as they should - but the div drops them down to the end of my nav to the left.
    I have three divs:
    Navigation: float left
    Google adds: float right
    and content - no float / no clear.
    Can anyone suggest any way to get this div to appear at the top of the page, in line with the other two divs, as it should?

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    try floatibg all

    Floated all divs, moved Google ad <div id="additional"> to bottom, and encased page in <div id="wrap"> (of course remove red background).

    Can you do without repeating WWvA and remove underscore from links?

    Code:
    @charset "UTF-8";   /* CSS Document */
    * { padding: 0; margin: 0; }
    body { height:100%; margin:0; 	padding:0; border:0;	
    	width:100%; min-width:600px;	 }
    #wrap { margin: 0 auto; background: red; width: 95%; min-width: 600px; max-width: 1000px; }
    .boxbanner { background: url("../images/vvltgrayparch.jpg"); 
    	height: 5em; padding: 10px; text-align: center; }
    .bannerleft { float: left; margin-top: 0; }
    .bannerright { float: right; 	margin-top: 0; }
    /* *my* nav under the heading */
    #navcontainer {	margin-left: auto; margin-right: auto;	margin-bottom: 8px;
    	padding-bottom: 8px; border-top: 1px solid #999;
    	border-bottom: 1px solid #999; 	z-index: 1; }
    #navcontainer ul { list-style-type: none; text-align: center; 	margin-top: 8px; 	padding: 0; position: relative; z-index: 2; }
    #navcontainer li { display: inline; text-align: center; margin: 0 5px; }
    #navcontainer ul li a { padding: 1px 7px; color: #666; background-color: #fff; border: 1px solid #ccc; text-decoration: none; }
    #navcontainer ul li a:hover { color: #000; 	border: 1px solid #666;
    	border-top: 2px solid #666; border-bottom: 2px solid #666; }
    /*  Navigation on the left */
    #navigation { float: left; 
    	width: 20%; min-width: 50px; max-width: 150px; 
    	padding: 5px; margin: 0 0.1%; 
    	background-color: #EEE8CD;
    	border: solid 1px #000;
    	list-style: none;
    }
    #navigation a:link { text-decoration: none; color: black; }
    #navigation a:visited { color: blue; }
    #navigation a:hover { color: cyan; text-decoration: overline underline; }
    #navigation a:active { 	color: lime; }
    #content {  float: left; width: 55%; min-width:200px; max-width: 800px; margin: 0 1% ;
    	/*margin-left: 192px;
    	margin-right: 192px;*/
    	border: solid 1px #000; padding: 10px;  color: black; 
    	background: white url("../images/Fontscafe_OldPaper-08a.jpg") no-repeat 100% 100%;
    }
    #content p, #content h3 {
    	margin: 0 5px 10px 5px;
    }
    #container {
    	padding: 0 20px 0 10px;
    }
    .ppage { 
    	float: left;
    	color: #0c11f3
    }
    .npage { 
    	float: right;
    	color:#636869
    }
    .left-top {
    	float: left;
    	margin: 5px 20px 10px 10px; 
    	padding: 4px; 
    	border: 1px solid #C4DBEA;
    }
    .diary {
    	clear:both;
    }
    p.indent {
    	text-indent: 2.0em;
    	margin: 0 20px;
    }
    p.cripples {
    	margin-right: 20%;
    	margin-left: 30%;
    } 
    hr {
    	color: blue;
    	background: blue;
    	border: 0;
    	height: 2px;
    	margin: 5px 0;
    }
    /* allocate area for Google adds */
    #additional {
    	float: right; 
    	width: 20%; max-width: 160px; min-width: 100px; 
    	padding: 5px; margin: 0 0.1%;
    	background-color: #99CC99;
    	border: solid 1px #000;
    }
    
    /* only on boxbanner */
    h1 {
    	text-shadow:2px 2px 2px #333333
    }
    /* letter / diary heading */
    h2 { 
    	text-align: center;
    	margin:.5em 0 .5em 0;
    	padding:0;
    }
    /*  date associated with a diary entry */
    h3 {
    /*   text-align: left;
       margin: 0;
       padding: 0 0 5px 0; */
    }
    h4 {
       text-align: left;
       margin: 0;
       padding: 0;
    }
    /* bottom banner - what else! */
    #footer {
    	clear: both;
    	border-top: solid thin blue;
    	background-color: #66C;
    	padding: 10px;
    	border: 1px solid #000;
    	margin-top: 20px;
    	text-align: center;
    	font-size:  small;  
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head> 
    	<link rel="stylesheet" type="text/css" href="3col2.css" >
    	<meta name="verify-v1" content="OsoUnzoyhAtyoWoJMscuMgM5lgTQD75c9gdw2Mv/9ek=" >
    	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    	<title>WWV Diaries - Diary - Sept. 4, 63</title>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-34883848-1']);
      _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="wrap"><div class="boxbanner">
    	<img class="bannerleft" alt="A Confederate Soldier in 'field' gear" src="images/80cpvt2.jpg" width="28" height="80" > 
    	<img class="bannerright" alt="A Federal Soldier in 'field' gear" src="images/80uspvt2.jpg" width="36" height="80" >
    	<h1>William Wallace van Amber*<br>Civil War Diaries &amp; Letters</h1>
    </div>
    <div id="navcontainer">
        <ul id="navlist">
            <li><a href="index.php">Home Page</a></li>
            <li><a href="forward.php">van Amber Letters</a></li>
    		<li><a href="valinks.php">Civil War Links</a></li>
    		<li><a href="vacontact.php">Contact Info</a></li>
        </ul>
    </div>
    <div id="container">
    	<ul id="navigation">
    		<li><a href="invalidcripples.php">03/14/65 Invalid Cripples</a></li>
    		<li><a href="630800va1.php">08/??/63 *</a></li>
    		<li><a href="630801gn1.php">08/01/63 George Newman</a></li>
    		<li><a href="630805vad.php">08/05/63 * Diary</a></li>
    		<li><a href="630807va1.php">08/07/63 *</a></li>
    		<li><a href="630808vad.php">08/08/63 * Diary</a></li>
    		<li><a href="630809va1.php">08/09/63 *</a></li>
    		<li><a href="630811vad.php">08/11/63 * Diary</a></li>
    		<li><a href="630816va1.php">08/16/63 *</a></li>
    		<li><a href="630817vad.php">08/17/63 * Diary</a></li>
    		<li><a href="630904va1.php">09/04/63 *</a></li>
    		<li><a href="630904vad.php">09/04/63 * Diary</a></li>
    		<li><a href="630918va1.php">09/18/63 *</a></li>
    		<li><a href="630919vad.php">09/19/63 * Diary</a></li>
    		<li><a href="631001va1.php">10/01/63 *</a></li>
    		<li><a href="631002vad.php">10/02/63 * Diary</a></li>
    		<li><a href="631021va1.php">10/21/63 *</a></li>
    		<li><a href="631022vad.php">10/22/63 * Diary</a></li>
    		<li><a href="631103va1.php">11/03/63 *</a></li>
    		<li><a href="631104vad.php">11/04/63 * Diary</a></li>
    		<li><a href="631116va1.php">11/16/63 *</a></li>
    		<li><a href="631117vad.php">11/17/63 * Diary</a></li>
    		<li><a href="631206va1.php">12/06/63 *</a></li>
    		<li><a href="631207vad.php">12/07/63 * Diary</a></li>
    		<li><a href="631213va1.php">12/13/63 *</a></li>
    		<li><a href="631214vad.php">12/14/63 * Diary</a></li>
    		<li><a href="631220va1.php">12/20/63 *</a></li>
    		<li><a href="631221vad.php">12/21/63 * Diary</a></li>
    		<li><a href="640101va1.php">01/01/64 *</a></li>
    		<li><a href="640101vad.php">01/01/64 * Diary</a></li>
    		<li><a href="640114va1.php">01/14/64 *</a></li>
    		<li><a href="640116vad.php">01/16/64 * Diary</a></li>
    		<li><a href="640118va1.php">01/18/64 *</a></li>
    		<li><a href="640119vad.php">01/19/64 * Diary</a></li>
    		<li><a href="640124va1.php">01/24/64 *</a></li>
    		<li><a href="640125vad.php">01/25/64 * Diary</a></li>
    		<li><a href="640212va1.php">02/12/64 *</a></li>
    		<li><a href="640212vad.php">02/12/64 * Diary</a></li>
    		<li><a href="640219va1.php">02/19/64 *</a></li>
    		<li><a href="640225va1.php">02/25/64 *</a></li>
    		<li><a href="640301vad.php">03/01/64 * Diary</a></li>
    		<li><a href="640318va1.php">03/18/64 *</a></li>
    		<li><a href="640320vad.php">03/20/64 * Diary</a></li>
    		<li><a href="640322va1.php">03/22/64 *</a></li>
    		<li><a href="640323vad.php">03/23/64 * Diary</a></li>
    		<li><a href="640327va1.php">03/27/64 *</a></li>
    		<li><a href="640401vad.php">04/01/64 * Diary</a></li>
    		<li><a href="640403ma1.php">04/03/64 *</a></li>
    		<li><a href="640404vad.php">04/04/64 * Diary</a></li>
    		<li><a href="640410va1.php">04/10/64 *</a></li>
    		<li><a href="640413dus1.php">04/13/64 *</a></li>
    		<li><a href="640417va1.php">04/17/64 *</a></li>
    		<li><a href="640427va1.php">04/27/64 *</a></li>
    		<li><a href="640503vad.php">05/03/64 * Diary</a></li>
    		<li><a href="640511va1.php">05/11/64 *</a></li>
    		<li><a href="640511va2.php">05/11/64 *</a></li>
    		<li><a href="640512vad.php">05/12/64 * Diary</a></li>
    		<li><a href="640515va1.php">05/15/64 *</a></li>
    		<li><a href="640516vad.php">05/16/64 * Diary</a></li>
    		<li><a href="640518va1.php">05/18/64 *</a></li>
    		<li><a href="640519vad.php">05/19/64 * Diary</a></li>
    		<li><a href="640522va1.php">05/22/64 *</a></li>
    		<li><a href="640523vad.php">05/23/64 * Diary</a></li>
    		<li><a href="640525va1.php">05/25/64 *</a></li>
    		
    	</ul>
    </div>
    
    <div id="content">
    	<a class="ppage" href="630904va1.php"> << </a>
    	<a class="npage" href="630918va1.php"> >> </a>
    	<div class="diary">
    	<h2>Diary Entries September 4th, 1863</h2>
    	<a href="images/630904vad.jpg">
    	<img alt="photo of this letter" src="images/630904vad_1.jpg" class="left-top" ></a>
    	<h3>Sat. Sept. 5, 1863</h3>
    	<p class="indent">Have been down to the river and washed my shirt, socks, towel and handkerchief. There is some skirmishing between us and Lees men every night. About a mile between us.</p>
    	<h3>Sun. Sept. 6, 1863</h3>
    	<p class="indent">Had inspection of everything. Went over to the division hospital to see Rastus White, He was taken there Wednesday it seems like. Sunday here, it is very still except playing cards, there is a good deal of that going on. I have not had a card in my hand yet.</p>
    	</div>
    	<div class="diary">
    	<hr>
    	<a href="images/630907vad.jpg">
    	<img alt="photo of this letter" src="images/630907vad_1.jpg" class="left-top" ></a>
    	<h3>Mon. Sept. 7, 1863</h3>
    	<p class="indent">It is all quiet here with nothing going on but I drill a while </p>
    	<h3>Tues. Sept. 8, 1863</h3>
    	<p class="indent">Nothing new. The same as yesterday,</p>
    	<h3>Wed. Sept. 9, 1863</h3>
    	<p class="indent">No drill today. General policing of camp today. Expect a general inspection of camp and clothing tomorrow or next day.</p>
    	</div>
    	<div class="diary">
    	<hr>
    	<a href="images/630910vad.jpg">
    	<img alt="photo of this letter" src="images/630910vad_1.jpg" class="left-top" ></a>
    	<h3>Thu. Sept. 10, 1863</h3>
    	<p class="indent">Went over to the 106 regt today. Saw lots of boys that I was acquainted with. Saw Horis Pickett had a good visit with him.</p>
    	<h3>Fri. Sept. 11, 1963</h3>
    	<p class="indent">We have not had any rain since I came here. It is very pleasant and warm yet. My health is good.</p>
    	<h3>Sat. Sept. 12, 1863</h3>
    	<p class="indent">Drill this morning as ever and battalion drill this afternoon. It rained this afternoon a little.</p>
    	</div>
    	<div class="diary">
    	<hr>
    	<a href="images/630913vad.jpg">
    	<img alt="photo of this letter" src="images/630913vad_1.jpg" class="left-top" ></a>
    	<h3>Sun. Sept. 13, 1863</h3>
    	<p class="indent">We had an awful thunderstorm this morning before daylight. It is now midday. We got orders to be ready to march at a minutes notice last night.</p>
    	<h3>Mon. Sept. 14, 1863</h3>
    	<p class="indent">Detailed for camp guard today; to go at 10 o. c. Two boys over from the 106th Ratio Maltby and Burny Vanorman.</p>
    	<h3>Tues. Sept. 15, 1863</h3>
    	<p class="indent">Came off guard at 10 o.c. this morning. We received pay today. 20 dollars &amp; 80 cts. Got three days rations and 60 cartridges with orders to be ready to march this afternoon.</p>
    	</div>
    	<div class="diary">
    	<hr>
    	<a href="images/630916vad.jpg">
    	<img alt="photo of this letter" src="images/630916vad_1.jpg" class="left-top" ></a>
    	<h3>Wed. Sept. 16, 1863</h3>
    	<p class="indent">Started this morning from camp at 6 o.c. crossed the Rappahannock and marched towards Culpeper. We are camped for the night near Culpeper.</p>
    	<h3>Thu. Sept. 17, 1863</h3>
    	<p class="indent">Here in camp near Culpeper doing nothing. No drill today. There is a whole corps of infantry laying here. A good many of the regiments received conscripts yesterday. It rained some today. I sent a letter to I. M. J. today with 10 dollars.</p>
    	<h3>Fri. Sept. 18, 1863</h3>
    	<p class="indent">It rains like fun this morning, it rained till about noon. Henry Knox has gone to the hospital tonight. I took his knapsack for him. I have written a letter to my dear Ett today.</p>
    	</div>
    </div> 
    <div id="additional">
    	<script type="text/javascript"><!--
    	google_ad_client = "ca-pub-8709792112703145";
    	/* aj wide */
    	google_ad_slot = "6718516750";
    	google_ad_width = 160;
    	google_ad_height = 600;
    	//-->
    	</script>
    	<script type="text/javascript"
    	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    	</script>
    		</div><!--closADDITIONAL-->
    
    		<div id="footer">
    			<p> Copyright &copy; 2005 - 2012 Alfred M. Jones<br>
    			Last changed: September 27, 2012.</p>
    		</div><!--closFOOTER-->
    </div><!--closWRAP-->
    </body>
    </html>
    Last edited by waxdoc; 09-30-2012 at 12:09 AM. Reason: fix

  • Users who have thanked waxdoc for this post:

    aljones (10-02-2012)

  • #10
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Waxdoc, I'm going to have to figure out how you did what you did, but it looks good!
    I'd like to widen that center div a bit, but think I can figure that out.
    ... and what's wrong with red - maybe it's a little bright, but you sure won't miss it!
    Thank you, <sir ??>
    //al

  • #11
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have a few questions but I'll go with one for now:
    You use percentages where I would have used px - in margins, for example - just wondering why.
    And please don't say because yours works and mine didn't!

    I've spent the evening updating php includes and can now duplicate yours - not too bad, just need to add the extra div to the other source php and I think I'll be home free.
    Thank the gods for diff programs!!

  • #12
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Sometimes we have to go back to things we would rather not use. Have you tried treating it as tabular data and putting it in a 2-column table?

    I hate to suggest a table for layout, but if that gets it close then it is possible we could manage it with faux tables using alternate display methods on div tags. I have an article about such methods on my site.

    It is worth a try perhaps.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #13
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    COBOLDinosaur, no need, the changes that WaxDoc provided do exactly what I want (thank you sir!)
    I'm just intrigued a bit by the way he does some of the things he does.

  • #14
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    flluid or fixed?

    Hello again.

    I like fluid and "responsive" layouts that re-size with browser window size so, therefore, use % percentages. See for instance http://www.josephdenaro.com or http://auntnini.webs.com

    Using a (naughty! No,NO!) <table> layout is not a sin (if it works). A fixed 3-column layout (without any floats) might be your answer. When figuring widths, remember the CSS box model and calculate right- and left-side padding, margin and border (that's x2 ) plus the content width (add some breathing space too). Then create your overall containing <div> (which I called WRAP) with a width great enough to encompass the inner 3-columns. You can then calculate your middle and right <div> margins to clear the columns to the left.

    ==========
    Humgh! What I'm finding when searching for 3-column fixed CSS layouts, such as http://www.csstutorial.net/2010/04/3-column-layout/, use floats.

    Think the main thing is to establish overall wrapper div that is wide enough. Also don't let that right-side Google ad squeeze out your main content.

  • #15
    New Coder
    Join Date
    Sep 2012
    Location
    Terlingua, Texas
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Waxdoc, since you're floating around on line at the moment ... I've made a few changes which mostly work as I want. The left and right are fixed width ... I'm trying to leave the remaining "body" open so it floats depending on the width of browser window.
    It behaves oddly when someone (me) tries to resize the window too narrow ... the google add (which garners me nothing but ... ) will drop to the bottom. Even though the center portion is based on a percentage, the gap between the body and the add changes as you resize it ... how come, I don't see it.
    If you have the time, would you mind revisiting ( http://aljones.us ) and seeing if you can help me ... (( and don't say, some *old* folks are beyond help, I already know that!! ))
    Thanks //al


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •