View Full Version : wrapper maring right problem

11-20-2010, 01:29 PM

I'm having trouble with my page width.

I have centered my wrapper and it all looks fine on my Mac. But when I look at the site on my iPhone and iPad there is a huge amount of margin on the right hand side.
Also when I look with IE on my laptop there is a horizontal scroll bar.

This is driving me crazy, any help much appreciated!
WEBSITE (http://www.alexvachon.com/joomla)

11-20-2010, 02:08 PM
Add clear:left; to #content and check again.

11-20-2010, 06:56 PM
Hello beautyfiend,
Your layout needs a little reworking. You are trying to place your picture next to #component but they are not in the same container. Both should be in #content. Then you can float one the image left and put the "Welcome ..." next to it.

Try arranging them something like this -
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
background: #393939 url(http://alexvachon.com/joomla/templates/alex/images/layout/flock.jpg);
#wrapper {
margin: 30px auto;
padding: 0;
background: url(http://alexvachon.com/joomla/templates/alex/images/layout/gradient.png) repeat-y;
font: 14px/150% 'Josefin Sans', georgia, arial, serif;
color: #fff;
#content {
margin: 0;
padding: 0;
overflow: auto; /*to clear the floats*/
#picsection {
height: 485px;
width: 323px;
float: left;
margin: 0 0 0 20px;
#component {
margin: 0 0 0 373px;
padding: 40px 20px 20px;
<div id= "wrapper">
<div id="content">
<img src="http://www.alexvachon.com/joomla/images/stories/alextguitar.jpg" alt="alextguitar" id="picsection" />
<div id="component">
<p>Welcome to my Website.&nbsp; Here you can listen to some of my music, watch my videos, view my images and find out about my latest news. <br />
<br />
I hope you enjoy the site, thank you for visiting. <br />
Please feel free to leave me feedback via the 'contact' link. Thank you!</p>
<p>&nbsp;&nbsp; <span class="sig">Alex</span> <br />
<span class="sig"><img alt="line" src="/joomla/images/stories/line.png" height="14" width="58" /></span></p>
<img class="ornate" alt="ornate" src="/joomla/images/stories/ornate.png" height="421" width="325" />
<!--end component--></div>
<!--end content--></div>
<!--end wrapper--></div>

11-24-2010, 08:05 PM