Picture gadget is stuck on the right

Can anybody help me, please Smile

I added a picture gadget on my Blogger sidebar (Page Elements > Add A Gadget > Picture), but when I do a preview the picture is moved far on the right, while it should properly be centered, because the Labels widget is correctly centered.

Visual explanation:

I tried changing the sidebar's padding and margins, but then the Labels go left/right while the picture stays on its fixed position.

Here's my CSS:

<?xml version="1.0" encoding="UTF-8" ?>

Layout . Divs moving out of container

This is the Html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<!--- 
	  My first site using Html 5 
 
--->
 
 
<title> A Guide To HTML 5 </title>
 
 
<link href="style/css1.css" rel="stylesheet" type="text/css">
 
<body>
 
<div id="container">
 
 <div id="header">
  <header> 
 
    <h1> Html 5 </h1>
 
    <!--- below is the html 5 tag nav which sets out the navigation --->
 
    <nav> 
       <div class="menu">
 
       <ul> 
      <li> <a href="#"> Home </a> </li>

2 Content Columns: Float variable-width content column next to fixed width content column

I am a CSS noob. Sorry if this is redundant of other answers--I did try to search the forum and the web before posting.

I'd like to do this without javascript if possible:

I am trying to create a layout that has two content columns. The left content column can be fixed width, but I would like the right column to behave differently, depending on screen resolution:
(1) At lower screen resolutions (eg 800x600), the right content column will drop below the left content column.
(2) At higher screen resolutions, the right content column will float to the right of the left content column.

Liquid layout - float in main content clears outer float

I have set up liquid 2 column layout where sidebar has fixed width and is floated left. Main content has margin the same as sidebar's width. The problem is that if I clear floats inside the main content, it clears the sidebar too and moves the content down.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 
<head>
<title>Float test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#wrap {
    min-height: 100%;
    margin: auto;
    position: relative;
    background:cyan;
}

I am racking my brain here.

I am racking my brain here, and I am sure it is a stupid mistake.

I can not get the content area (where the 1, 2, 3, 4, 5) are located to render right. I set up a inner div with margins and they do not work. Not sure what I am missing here.

On top of that the footer does not render properly at all either.

Any input would be great. Thanks guys.

Syndicate content