CSS - Help With Css Content Boxes

Hallo,

I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/
but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute.

Does some know a good source where I find more information or documented examples ?

Finally I can fix my problems, but it take so much time of testing...

Thnaks

My boxes line up horizontally perfectly in Firefox but not in IE7 (not suprisingly).

Because of the rules I can't show you the link but the html places two boxes side by side lined up so that they are the same distance from the top. It looks right in Firefox but IE7 drops the right box about 10 pixels or so.

My Html is this:

<div id="newsboxleft">
<div id="newsboxright"></div></div>

My CSS is this:

#newsboxleft { margin: 10px auto;
position: relative;
top: 0px;
left: -187px;
width: 350px;
height: 142px;
background: url(../images/newsboxleft.jpg) repeat-x top;
border-top: 0px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 0px;
clear: both;
}

#newsboxright { margin: 10px auto;
position: relative;
top: 0px;
left: 373px;
width: 350px;
height: 142px;
background: url(../images/newsboxright.jpg) repeat-x top;
border-top: 0px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 0px;
clear: both;
}


I hope someone can help. Thanks.

Hello:

I'm trying to place two drop down boxes at the right of my page.

When I view the pages in Firefox and Internet Explorer, they are so far off.

You can view the page yourself by visiting:
http://www.informedmortgage/100-financing.html

I've tried changing widths, margins, etc and am having no luck.

I can use some help. I hope someone can help me out.

Thank you.
Back to top

Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using:

Code:

.cssnavend	{
	position:relative;
	font-family: arial, verdana, helvetica, sans-serif;
	display: block;
	width: 209px;
	height: 9px;
	margin: 0; 
	margin-bottom:0px;
	padding: 0;
}
.cssnav	{
	position:relative;
	font-family: arial, verdana, helvetica, sans-serif;
	background-image: url(images/but-over.jpg);
	background-repeat: no-repeat;
	display: block;
	width: 209px;
	height: 31px;
	margin: 0; 
	margin-bottom:0px;
	padding: 0;
}
.cssnav a {
	display:block;
	font-size: 11px;
	width: 209px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	color: #096CCE; 
	text-decoration: none; 
}
.cssnav img {
	width: 100%; 
	height: 100%;
	border: 0;
}
.cssnav a:hover{
	color: #000;
	}
* html a:hover {
	visibility:visible
}
.cssnav a:hover img{
	visibility:hidden
}
.cssnav span {	
	position:absolute;
	left:7px;	
	top:7px;	
	margin:0;	
	cursor: pointer;
	}
#box {
	margin-top: 10px;
	padding: 0;
	width: 209px;
	display: block;
	}
#boxtop {
	width: 209px;
	height: 11px;
}
#boxcontent {
	width: 209px;
	background: #DFE5EB;
}
#boxbottom {
	width: 209px;
	height: 11px;
}
#boxtext {
	width: 209px;
	background: #DFE5EB;
	padding: 2px;
}

The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box.

Code:

<div class="cssnavend"><img src="images/but-top.jpg"></div>
<div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div>
<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div>
<div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div>
<div class="cssnavend"><img src="images/but-bot.jpg"></div>

<br><br>

<div class="box">
	<div class="boxtop"><img src=images/but-top.jpg></div>
	<div content="boxcontent">
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div>
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div>
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div>
	</div>
	<div class="boxbottom"><img src=images/but-bot.jpg></div>
</div>

<br><br>

<div class="box">
	<div class="boxtop"><img src=images/box-top.jpg></div>
	<div class="boxcontent">
		<div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div>
	</div>
	<div class="boxbottom"><img src=images/box-bot.jpg></div>
</div>

Thank you all who help.

hi,

Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc.

Here is my code so far -

layout.css - (one that gets included on each page)

Code:

@import "style.css";
	
body {
	margin:10px 10px 0px 10px;
	padding:0px;
}
	
#leftcontent {
	position: absolute;
	left:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#centercontent {
	
	background:#fff;
 		margin-left: 199px;
 		margin-right:199px;
	border:1px solid #000;		
	voice-family: "\"}\"";
	voice-family: inherit;
  	margin-left: 201px;
  	margin-right:201px;
}

#shoutbox {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#rightcontent {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}
	
#banner, #footer {
  background:#fff;
	height:40px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#footer {
  background:#fff;
	height:40px;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#banner h1 {
	font-size:16px;
	padding:10px 10px 0px 10px;
	margin:0px;
}
	
#shoutbox, #rightcontent p {
	font-size:10px
}

style.css - text formatting etc.

Code:

body {
	font:	12px/1.2 Tahoma;
	background:#ddd;
	padding:0px;
	margin:0px;
}
	
a {
	text-decoration:none;
	font-weight:bold;
	color:#c00;
}
	
pre {
	font-size:11px;
	color:blue;
}
	
ol {
	margin-right:40px;
}
li {
	margin-bottom:10px;
}

p,h1,pre {
	margin:0px 10px 10px 10px;
}
		
h1 {
	font-size:14px;
	padding-top:10px;
}

it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger.

here is an image of what i get -



and this is what i am aiming to acheive -



as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/

i would be greatful for any help you guys can provide me

thanks,

dynamyt

Hi

I am creating a new site for a friend in Wordpress

ilovelifebecause.com

I can usually muddle through in css to make changes, but i'm stumped at the moment.

What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help?

many thanks in advance
Paul

I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label.

I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>.
Code:

<div id=secondline>
  <span id=ed>
    <b>Event Definition</b>:<br>
    <textarea name=inject cols=45 rows=6></textarea>
  </span>
  <span id=after>
    <b>After</b><br>
    <select name=next size=8 multiple>
      <option value=0>0
      ...
      <option value=100>100
    </select>
  </span>
</div>

but, alas, it doesn't work like that.

How can I get Code:

<tr>
  <td>label<br>form_control</td>
  <td>label<br>form_control</td>
</tr>

behavior without using tables?

Hello,

I created a site with floating frames and it looks good in IE6 and FF/Mozilla.

But I have one problem:
I use in my dynamic layout an ID more then once
(thats not OK according w3 validation)

I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages
The skyscraper: http://www.all4yourwebsite.com/
and the result/search page: http://www.all4yourwebsite.com/search.php

I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea?

I'm brand new to CSS. I pieced together the following CSS style sheet:

body {
margin-top:5px;
margin-bottom:5px;
padding:0;
background:#ccffff;
}

t{line-height:36px;}

#wrap {
position:50%;
width:613px;
margin:0 auto;
background:#ffffff;
margin-left:auto;
margin-right:auto;
align:center;
}

#sidebar {
position:absolute;
float:left;
width:150px;
border: 1px solid #000033;
padding:15px;
background:#ffffff;
height:370px;
z-index:1;
}

#main {
float:right;
width:390px;
border: 1px solid #000033;
overflow: auto;
font-family: "Times New Roman", serif;
font-size: 13px;
padding-top:12px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
background:#ffffff;
background-repeat:no-repeat;
background-position:75% 535px;
background-image:url(smalljester.jpg);
height:750px;
z-index:2;
}

It works fine on most browsers, but not of course in IE/Win. I think there's something basic I'm not understanding about style sheets. The page is meant to be (and is on most browsers I've tried and on Macs) centered (the two boxes centered), the two boxes are meant to have white backgrounds with thin solid borders, and the boxes are meant to overlap perfectly (the right border of the left box should exactly overlap the left border of the right box). Right now in IE(8)/Win(XP) it's not centered, the two boxes are not connected (separated by white space on a light blue background), and the white background extends the full height of the #main box (where it's not meant to go below the bottom of the left column). Any help appreciated.

i have got two areas created with css one above the other but there is a large white gap between i have tried playing arond with the CSS file but cant gt them closer together im still only learning css but i thought id be able to do this.... if someone could advise that would be really great...

here is the page so you can see what is happeneing
http://www.justtaps.com/test/admintemplate.php

and this is a link to the css file
http://www.justtaps.com/test/css/main.css

thanks in advanced to anyone who replies..

RF

I'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy!

this is my html:<body>
<div id="container">
<div class="box">
<h1>Silver City Food Co-op</h1>
<p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div>
<div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div>

<div class="box2"><div class="box3"><p2>Food News</p2></div></div>
</div>
</body>
</html>

this is my CSS

body{background-color: #69916D}
h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px}
p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px}
p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px}

div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501}
div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2}
div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1}
div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px}


body {
text-align: center;
}

#container {margin: 0 auto;
width: 750px; text-align: left
}

Thanks for the help!!

I have 6 boxes in the body- 3 floating to right and three to the left.

The 3 to the right are fine- at top of border and stacked one on top of the other, but the 3 to the left and pushed all the way down past below the 3 to the left.

I've tried all the positioning options but can't get the left boxes up to the top. Do I need to set-up a table for it to work?

Thanks for any help!

Hey guys,

This seems like a really simple thing to accomplish, but I'm just having trouble locking on to what exactly to put in the code.

Basically, I want to have two rows of four horizontal boxes, with the two rows of boxes and the contents of each box centered.

How do I go about doing this? Should I use <span> for each box and then just use absolute positioning? Or should I put them in a container <div> or something?

If anybody has any code samples, that would be a big help. I just want it to end up looking like this:

[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]

...with all the boxes centered on the page.

Thanks for the help!

- Luke

I know, this sounds like an AJAX question, but I don't think thats the solution. I have created a layout:
http://www.cabinincanada.com/script/

The problem is, that I want to be able to click on the About us button, and have it load into the content box where the posts are. I could just create a second page, copying the HTML and making the changes, but isn't this defeating the purpose of CSS? I would then have to go through and update all my links on both pages if I made changes. How do I load content into a box from an external web-page?