Hello,
ive been recently appointed to transforming our table-full site into a
nice accessible and table-free website.
to make the story short, everything was going rather smoothly until i
got this issue with all browsers.
basically, im trying to float a picture on the left side of a
paragraph.
its pretty easy but it gets tricky when we make the text bigger (using
the ctrl-mouse wheel for instance)
all of my pages are somewhat like this....
<div id="container"<!-- padding :10px -->
<div id="ie_wrapper"<!-- float : left -->
<div id="content"<!-- left-margin : 150px; -->
<!-- all of the above is working, this is just to give a picture of how
things are layed out -->
<!-- this is what is not working exactly as intended -->
<div style="float:left; width:50px;><img src="some picture" /></div>
<div style="margin-left: 55px"><h2 style="display:inline">This is
some content</h2></div>
<div style="float:left; width:50px;><img src="some picture" /></div>
<div style="margin-left: 55px"><h2 style="display:inline">This is
some more content</h2></div>
<div style="float:left; width:50px;><img src="some picture" /></div>
<div style="margin-left: 55px"><h2 style="display:inline">This is
some even more content</h2></div>
<!-- all the code below is working too -->
</div>
</div>
<div id="navigation"></div<!-- left-margin : -100%; width:150px;
-->
</div>
basically what im trying to achieve is to have the picture be a box and
the content be a box and when the next set of picture/content is
displayed that it does not indent with the previous one.
(you might want to view this in notepad for a better view)
- How it should be :
****** *****************************
* * *****************************
******
****** ******************************************
* * * *
****** * *
* *
******************************************
- How it is :
****** *****************************
* * *****************************
****** ****** ******************************************
* * * *
****** * *
* *
******************************************
Below is my style sheet (a small part of it)
@import url("Interdec_Style.css");
@import url("controls/controls.css");
/* ************ Stylesheet positioning classes ****************** */
html,body, form {
margin :0;
padding :0;
}
div { display : block;}
div#footer p {
margin :0;
padding :5px 10px;
}
div.wrapper {
float : left;
width : 100%;
}
div.content {
margin-left : 150px;
display : inline;
float : left;
}
/*
div#navigation {
float : left;
width : 150px;
margin-left : -100%;
}
*/
div#extra{
clear : left;
width : 100%;
}
div#container {
min-width:600px;
padding: 10px;
}
..white_bg {
background : #fff;
}
..small_padding {
padding : 5px;
}
..medium_padding {
padding : 10px;
}
#main_table {
display:block;
padding: 1px 20px 1px 20px;
background:#cccccc;
}
div#bottom_main_border {
float:left;
width:100%;
background:#cccccc;
margin-bottom : 15px;
}
..floatLeft {
float:left;
}
..floatRight {
float:right;
}
..footer {
float:left;
width:100%;
margin-top : 5px;
}
/* ********** Summaries positioning (shared) **************** */
div.Summary_Indent {
float:left;
width : 23px;
}
div.Summary_Content {
margin-left : 30px;
height:40px;
}
/* ************************************************** ******** */
