<body>
<div id="tut_header"></div>
<div class="tut_name"></div>
<div id="tut_middle"></div>
<div class="image"></div>
<div class="tut_content"><p>content</p></div>
<div id="tut_base"></div>
</body>
How come when I position class=tut_content with margins. It moves the id=tut_base as well I don’t see no relation between the two.
Are you reffering to prettyphoto, one I have used on my portfolio?
No.
I forgot a graphical element I wanted to add as a background image behind this section of code:
<a href="/tutorials/ramen/paperpile.jpg" class="highslide right" onclick="return hs.expand(this)">
<img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="360" width="460" /></a>
<br class="clear">
On this page. I assume a <DIV> would go behind it ?
That’s called a lightbox, and yes he is 
What is your portfolio, the one in your signature ?
Are you reffering to prettyphoto, one I have used on my portfolio?
Saving Thread space Lightbox can pan too !!! Ok I’ll look is over.
I’m not entirely sure why you didn’t just create a new thread :). That’s called a lightbox (unless I’m misinterpreting something)
This is an update on a old thread. Does anyone know a tool that when I add images to this page they appear small but when a user clicks on them they become almost full screen with the option to pan the image if there screen is smaller ?
Unless I’m over looking something, when I’m searching but I can’t find nothing.
id=tut_base is immediately after class=tut_content, so they are related (as siblings). Perhaps I’m misunderstanding your question. Could you post a link? Some CSS?
In any case, something doesn’t look right. Why are tut_name, image and tut_content classes, but tut_middle is an ID? Wouldn’t tut_middle appear more than once (like the others), and hence need to be a class? Again, posting a full example might clarify the situation.
Assuming the elements are in the flow and non positioned then moving any one of them with margins them will have a knock-on effect on all the others.
The margins on the inner element will push the outer and following elements accordingly.
And then there may be margin-collapse to consider
As mentioned above we’d need the code for all that section to debug properly.
The Green areas of the page is where a graphic will be although the Green Areas of the page are a little taller then they should be I will fixed that once the graphics are complete. I’m trying to position the blue box beside the orange box but when I position it with margins the bottom green box moves as well and want to know what order did I put the code in that is causing this?
Hi, you really need to consider a restructure. You are havin to resort to huge negative margins to get the overlap of the backgrounds (-900px for example) and I refuse to help you try and get that working just on principle ;).
I’d nest the two boxes inside the gray element and that way the background will contain both of them (assuming the gray element has a clearing mechanism such as overflow/clearfix :))
I’m trying to position the blue box beside the orange box but when I position it with margins the bottom green box moves as well and want to know what order did I put the code in that is causing this?
You should be using floats to position elements beside each other. I don’t see any floats being used in the link you posted.
The clearing mechanism that Ryan mentioned would be for the floats.
That would just be a simple One Column layout with a header and footer. Then it would just have two floats in the middle div.
Applying a float moves the id=tut_base which I don’t want to have occur. I want tut_base to stay fixed where it’s at.
You are havin to resort to huge negative margins to get the overlap of the backgrounds (-900px for example) and I refuse to help you try and get that working just on principle
Huh ??
That would just be a simple One Column layout with a header and footer. Then it would just have two floats in the middle div.
That is my goal exactly what you had said Rayzur, one column and a header and a footer then place one box on one side, the the other on the other side then rotating the boxes vertically. I can’t get the “blue” box to rest beside the “orange” box, here is an update the changes are in the HTML (link in message #4)
Hi,
Something like this should get you pointed in the right direction.
You can adjust the margins on the floats as you desire. I set a 25px top and bottom padding on the middle div to eliminate top margins on the floats though.
<!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>
<title>Test</title>
<style type="text/css">
* {margin:0; padding:0;}
#wrap {
width:700px;
margin:auto;
}
#tut_header {
height: 225px;
background: #66CC00;
}
#tut_middle {
width:700px;/*IE6 haslayout*/
/*height: 800px;*/
/*margin-bottom: 200px;*/
padding:25px 0;
overflow:hidden;/*contain floated children*/
background: #AAAAAA;
}
.image {
float:left;
width:250px;
height:250px;
margin:0 0px 0px 25px;
display:inline;/*IE6 float margin bug*/
background: #CC9900;
}
.tut_content {
float:left;
width:300px;
height:300px;
margin:0 0 0 75px;
background: #0099FF;
}
#tut_base {
height: 225px;
background: #66CC00;
/*margin-top: 50px;*/
}
</style>
</head>
<body>
<div id="wrap">
<div id="tut_header"></div>
<div id="tut_middle">
<div class="image"></div>
<div class="tut_content">
<p>content</p>
</div>
</div>
<div id="tut_base"></div>
</div>
</body>
</html>
That is a pretty good head start, I noticed how you nested the classes, something I don’t quite have down yet !
Although I copied a portion of the code because I want the layout to be as follows:
image - content
content - image etc
Not to jump to far ahead in the game, but just for record when the situation arises the content box will shrink or get larger based on how much content is written in the box. I suppose the last part is something jQuery be used for ?
If you need the height to be shrink to fit, then just don’t specify it? Or if you need a height to get the background showing (even with little/no content boxes) then you could set a min-height
Hi,
The problem with your updated code is that the additional floats you just added are not nested in the same div as the previous floats. They are not being contained so the BG color does not extend with them.
Although I copied a portion of the code because I want the layout to be as follows:
image - content
content - image etc
Not to jump to far ahead in the game, but just for record when the situation arises the content box will shrink or get larger based on how much content is written in the box.
Ok, you want your floats to stagger. That can be done, but in a real world situation where the content is a dynamic height it will give varied heights that will effect the floats.
You can prevent floats from snagging on each other or rising up below the taller float one of two ways.
If you are going to have an image and a content div in each pair then there is no need to wrap the image in a div. The best way to do this is to set up some classes for left and right floats. You can then use those classes on the image and the content div as they stagger. Since the text in your content div will be unpredictable you will need to prevent float snag with one of the two methods I mentioned. I am going to use method #2 by setting clear:both on a <br> tag in the code below. That is usually frowned upon, but in this case it is either that or an empty clearing div or an extra wrapping div for the paired floats.
I have removed the height:300px; from the content div and set different amounts of text to show what is going on.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Staggered Float Demo</title>
<style type="text/css">
body {
margin:0;
padding:0;
font:100%/1.2 arial, helvetica, sans-serif;
background:#CDF;
}
h1 {
margin:0;
padding:.5em;
font-size:1.65em;
text-align:center;
}
p {
margin:.5em;
font-size:1em;
}
/*=== Begin Layout ===*/
#wrap {
width:700px;
margin:auto;
}
#head {
height:200px;
background: #66CC00;
}
#inner {
width:700px;/*IE6 haslayout*/
padding-top:32px;
overflow:hidden;/*contain floated children*/
background:#AAA;
}
#inner .left {/*class for all #inner > left floats*/
float:left;
margin:0 0 32px 32px;
display:inline;/*fix IE6 float margin bug*/
}
#inner .right {/*class for all #inner > right floats*/
float:right;
margin:0 32px 32px 0;
display:inline;/*fix IE6 float margin bug*/
}
.clear {
clear:both;
height:0;
font-size:0;
overflow:hidden;
}
#inner img {
width:250px;
height:250px;
background:#CC9900;
text-align:center;
}
#inner .content {
width:300px;
/*height:300px;/* height disabled for testing*/
background: #0099FF;
}
.content p {
margin:.5em .5em 2em;
}
#foot {
height:100px;
overflow:hidden;/*margin clearance*/
background:#66CC00;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="head">
<h1>Staggered Float Demo</h1>
</div>
<div id="inner">
<img class="left" src="images/demo.jpg" alt="left image">
<div class="content right">
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
</div>
<br class="clear">
<div class="content left">
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
</div>
<img class="right" src="images/demo.jpg" alt="right image">
<br class="clear">
<img class="left" src="images/demo.jpg" alt="left image">
<div class="content right">
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
</div>
<br class="clear">
<div class="content left">
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
</div>
<img class="right" src="images/demo.jpg" alt="right image">
<br class="clear">
</div><!--end inner-->
<div id="foot">
<p>Footer Stuff</p>
</div>
</div> <!--end wrap-->
</body>
</html>
In regards to my last post and the use of the <br> tag to clear the paired floats. I think a better way to handle this would be to wrap each pair of floats in a div. Either approach has to be done at the cost an extra element and a div would be the semantic way to do it in my opinion.
I have put up a live example this approach.
http://www.css-lab.com/test/husky.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Staggered Float Demo</title>
<style type="text/css">
body {
margin:0;
padding:0;
font:100%/1.2 arial, helvetica, sans-serif;
background:#CDF;
}
h1 {
margin:0;
padding:.5em;
font-size:1.65em;
text-align:center;
}
p {
margin:.5em;
font-size:1em;
}
/*=== Begin Layout ===*/
#wrap {
width:700px;
margin:auto;
}
#head {
height:200px;
background:#66CC00;
}
#inner {
width:100%;/*IE6 haslayout*/
padding-top:32px;
overflow:hidden;/*contain floated children*/
background:#AAA;
}
.floatwrap {/*wrap around each pair of floats*/
float:left;
width:100%;
margin-bottom:32px;
background:#BBB
}
#inner .left {/*class for all #inner > left floats*/
float:left;
margin:0 0 0 32px;
display:inline;/*fix IE6 float margin bug*/
}
#inner .right {/*class for all #inner > right floats*/
float:right;
margin:0 32px 0 0;
display:inline;/*fix IE6 float margin bug*/
}
#inner img {
width:250px;
height:250px;
background:#CC9900;
text-align:center;
}
#inner .content {
width:300px;
/*min-height:300px;/*temp test height*/
background: #0099FF;
}
.content p {
margin:.5em .5em 2em;
}
#foot {
height:100px;
overflow:hidden;/*margin clearance*/
background:#66CC00;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="head">
<h1>Staggered Float Demo</h1>
</div>
<div id="inner">
<div class="floatwrap">
<img class="left" src="images/demo.jpg" alt="left image">
<div class="content right">
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
</div>
</div>
<div class="floatwrap">
<div class="content left">
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
</div>
<img class="right" src="images/demo.jpg" alt="right image">
</div>
<div class="floatwrap">
<img class="left" src="images/demo.jpg" alt="left image">
<div class="content right">
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
<p>Right Content</p>
</div>
</div>
<div class="floatwrap">
<div class="content left">
<p>Left Content</p>
<p>Left Content</p>
<p>Left Content</p>
</div>
<img class="right" src="images/demo.jpg" alt="right image">
</div>
</div><!--end inner-->
<div id="foot">
<p>Footer Stuff</p>
</div>
</div> <!--end wrap-->
</body>
</html>