HTML - Help Getting My Side Columns To Be Fixed While Scrolling

Hi everyone, I'm trying to work out how to have a left and right side "column" both resize when the window is resized. An example of what I am after is : http://www.news.com.au/heraldsun/0,,,00.html.

I played with margin-left and -right but don't think it is quite what I am after.

Thanks.

Hello. First time here asking for help. Hope there's a solution!

The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped.

The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms.

On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen.

So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation.

On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE)

The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly.

In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE.

Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up.

The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer.

Hope someone can help me out here! Cheers, Jason.

I'm having some trouble trying to get the following page to show the three link columns centered, side by side:

http://centralmusic.com.previewmysite.com/links.php

EDIT: for reference, the title LINK is properly centered, and the ARTIST column should be directly below that, as is seen on the contact page

I've tried every trick you can find on google, but nothing seems to work while the float tag is involved, and if I remove the tag then the divs arn't side by side.

I've found that if I make a containing DIV with a FIXED witdth, it will center THAT div within it's parent using the margin: 0 trick. however, the 3 interior divs still float to the left of that container div. so if the containing div is wider then the total width of the interior divs, they do not appeared center (however on this page I COULD make use of equal column widths, but it doesn't end up being FF friendly).

Alright so I actually tried a couple more things after typing that last paragraph.
On this page:

http://centralmusic.com.previewmysite.com/gallery.php

I find that what i described so far is true, however on the first page i referenced, putting a containing div around the 3 columns made no apparent difference. I'm going to start double checking my code and comparing the two pages for differences to see what I'm doing wrong (on both pages though, the goal is to have a number of divs centered vertically, side by side). If anyone has any comments or hints to help me out that'd be great, but I'll definatley be posting back later with an update once I get a chance to try a few more things.

My code looks like this: Code:

<a id="commercialadvantages" href="/link1"><span> </span></a><a id="hearradio" href="/link2"><span> </span></a><a id="viewearnings" href="link3"><span> </span></a>

When I go to the live view, they come out stacked like this:

But I want them side by side, not stacked. Is it the <a> code that causes them to stack? What can I change in my code to make them side by side? Thx.

Hello,

I'm using the Lytebox image script and I would like for my images to appear side by side and not vertically. This is the code that I'm using but for some reason it came out kind of odd. Website:http://www.marinaelizabeth.com/2011/...book-1_30.html

Quote:
<center>Click on images to enlarge and view them as a gallery.</center>

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-kIL2bYltvuY/Tv5ZYiwh_PI/AAAAAAAAAWM/rajrPOgV4ok/s1600/4e8159ba888c8.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://4.bp.blogspot.com/-kIL2bYltvuY/Tv5ZYiwh_PI/AAAAAAAAAWM/rajrPOgV4ok/s1600/4e8159ba888c8.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
<br>
<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-rQua3zWNynw/Tv5HzbTLgxI/AAAAAAAAAUs/Uk6T6DfLBTw/s1600/301041_2223476301499_1085460275_32542139_1266806142_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://1.bp.blogspot.com/-rQua3zWNynw/Tv5HzbTLgxI/AAAAAAAAAUs/Uk6T6DfLBTw/s1600/301041_2223476301499_1085460275_32542139_1266806142_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
<br>
<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-_So5oCwC_zY/Tv5HzNghb7I/AAAAAAAAAUc/4uVJ24oiO6A/s1600/300161_2223481061618_1085460275_32542158_923192763_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-_So5oCwC_zY/Tv5HzNghb7I/AAAAAAAAAUc/4uVJ24oiO6A/s1600/300161_2223481061618_1085460275_32542158_923192763_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
<br>
<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-NzLeC4jz9vg/Tv5Hy3xv3cI/AAAAAAAAAUQ/3q-062i7e2g/s1600/300161_2223480941615_1085460275_32542155_373340707_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://3.bp.blogspot.com/-NzLeC4jz9vg/Tv5Hy3xv3cI/AAAAAAAAAUQ/3q-062i7e2g/s1600/300161_2223480941615_1085460275_32542155_373340707_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
<br>
<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/--K5mxuMSNDA/Tv5HywJFhvI/AAAAAAAAAUI/D5PxnOVYqtc/s1600/300161_2223480901614_1085460275_32542154_1471612777_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://1.bp.blogspot.com/--K5mxuMSNDA/Tv5HywJFhvI/AAAAAAAAAUI/D5PxnOVYqtc/s1600/300161_2223480901614_1085460275_32542154_1471612777_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
<br>
<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-AEljI6VqRXQ/Tv5OS3ta-PI/AAAAAAAAAVc/NOdLmyO4_E4/s1600/311979_2223482901664_1085460275_32542161_509691087_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-AEljI6VqRXQ/Tv5OS3ta-PI/AAAAAAAAAVc/NOdLmyO4_E4/s1600/311979_2223482901664_1085460275_32542161_509691087_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
<br>
<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-R27iVxEfLbM/Tv5OSf6kt-I/AAAAAAAAAVU/YQmkZr04C6w/s1600/301041_2223476421502_1085460275_32542142_204426155_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-R27iVxEfLbM/Tv5OSf6kt-I/AAAAAAAAAVU/YQmkZr04C6w/s1600/301041_2223476421502_1085460275_32542142_204426155_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
<br>
<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-qQSPdm60jgQ/Tv5ZY-pmGXI/AAAAAAAAAWU/3F9MxBXbV7M/s200/312657_2223450300849_1085460275_32542123_217211886_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-qQSPdm60jgQ/Tv5ZY-pmGXI/AAAAAAAAAWU/3F9MxBXbV7M/s200/312657_2223450300849_1085460275_32542123_217211886_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

Thanks in advance

Hello i am having some trouble aligning some checkboxes. I am trying to get them to sit side by side horizontally but when i do this with absolute positioning i will click the first set and it will check the second so i have to go way to the left of the first set to check mark it.

Sorry for the butchered script. Thanks

<div>
<tr>
<td height="40">

<label for="budget" class="label">Budget: From</label>
<input name="budget" type="text" id="budget">

<span class="from">To</span>

<label for="to" class="from"></label>
<input name="to" type="text" id="to">
</td>

</tr>
</div>



<tr>
<td>

<input name="boxesh" type="checkbox" id="home" value="walkdis">
<label for="home" class="checkboxes">Home</label><br>

<input name="boxesb" type="checkbox" id="BoatDock" value="walkdis">
<label for="BoatDock" class="checkboxes">Boat dock</label><br>

<input name="boxesv" type="checkbox" id="viewofwater" value="walkdis"
title="Check the ones you want">
<label for="viewofwater" class="checkboxes">View of Water</label><br>

</td>

<td>

I am trying to edit my image viewer on my site, but for some reason it works perfectly in chrome, safari and Firefox, but IE is giving me one issue. The images are being stacked vertically (one on to of the other) rather than show up all in one row horizontally. This is making my page longer in IE and just does not look the way I want it to..Any ideas at to what could cause this?

here is a link to test the issue...I have tried everything that I know how to do, but have had no success..http://www.jewelryboxavenue.com/Ocea...-Box_p_58.html

Hi folks,

I have a table and in one cell I have two images that normally appear side by side but when an a adjacent cell (or any cell in the same row) gets too large the images end up appearing on top of one another... is there some way to force them to stay side by side? I'd rather not have a table within the cell in question although i suppose i could if there's not some html or css way to make it work.

Thanks in advance,
Michael

Hi,
I'm new to HTML can anybody help me how to place to tables side by side

Hello,
I would like to make my two column web page into 3 columns and dont know how to do this. It is a template and I cannot figure out where to put the <td>.

My site is online and then I hope to delete this link if it is possible.
Please no negative remarks as I am notlooking for visitors I just want help. please.
]
Here is the code I want to put into the code but not sure where to put it to get the 3rd column.
I hope someone will be kind enough to help . thanks.


<td width="200"> <table width="100%" border="1" cellspacing="0"

cellpadding="0">
<tr>
<td width="200">

<p>
<a href="index.html">Home</a>

</p>

</td>
</tr>
</table>

Hey, I've got to modify this web project but I haven't done any web programming for 4 years. Could you tell me how I would put two forms side by side on a page? They're similar to the following format from w3schools. The forms are pretty much identical in structure apart from the content.

<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

Hello everyone.
I want to display two lists side by side.
When i float:left the first one, the second list collapses; that is,
the nested and enclosing lists are actually aligned.
How do I fix that?
Thanks
jenia
<?xml version = "1.0" encoding = "utf-8" ?>
<!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><style type="text/css">
li.fullBullet{list-style-type: disc;}
li.hollowBullet{list-style-type: circle;}
li.fullSquare{list-style-type:square;}
li.letter{list-style-type:lower-alpha;}
li.decimal{list-style-type:decimal;}
li.roman{list-style-type: lower-roman;}
#firstList{float:left; width: 100px; margin-right: 255px;}
#secondlist{
}
</style>
<title>Insert title here</title>
</head>
<body>
<ul id="firstList">
<li class="fullBullet">Outer-1</li>
<li class="fullBullet">Outer-2
<ul>
<li class="hollowBullet">Inner-1</li>
<li class="hollowBullet">Inner-2</li>
<li class="hollowBullet">Inner-3

<ul>
<li class="fullSquare">Deep-1</li>

</ul>

</li>
<li class="hollowBullet">Inner-4
<ul>
<li class="fullSquare">Deep-2</li>
</ul>
</li>
</ul>
</li>
<li class="fullBullet">Outer-3</li>
</ul>
<ol id="secondlist">
<li class="decimal">Outer-1</li>
<li class="decimal">Outer-2
<ol>
<li class="letter">Innter-1</li>
<li class="letter">Innter-2
<ol>
<li class="roman">Deep-1</li>
<li class="roman">Deep-2</li>
</ol>
</li>
</ol>
</li>
<li class="decimal">Outer3
<ol>
<li>inner-3</li>
</ol>
</li>
</ol>
</body>
</html>

I am trying to create a website. I have a picture in the middle of the page. I want to put a comment box on the right side of it, but centered with the picture. I have it on my page now and the comment box is on the right, but it is higher on the page than the picture. Here is the code I am using....

<div align="center"><span style="font-family: Arial; font-size: 12pt;"><img alt="Pasquale Di Scipio / Filomena Priore" src="/patsy_and_filomena.jpg" width="423" align="middle" height="290"></center><align="right"><!-- BEGIN MyShoutbox.com CODE -->
<iframe src="http://612085.myshoutbox.com/" width="205" height="400" frameborder="1" allowTransparency="true"></iframe>
<!-- END MyShoutbox.com CODE--></span>

What am I doing wrong? Here is my site address so you can see what I am talking about.

Maria's Family

Thank you