Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

will a div always be bellow the brevious div???

Status
Not open for further replies.
soniclnd

soniclnd

Technical User
Jan 6, 2005
51
US
i'm making a css layout, and i want a div to be next to the one before it, not bellow... i can't seem to do that... anybody knows why...
here is a portion of my code

Code: 
<div class="ltmiddle">
			<div class="slantright">
			<img src="spc.gif" alt=" " />
			</div>
			<div class="filling">
			<img src="spc.gif" alt=" " />
			</div>
		</div>

i want "filling" to be next to "slantright".... but it always gets to the bottom of it

anybody know?
 
Sort by date Sort by votes
You can position them to fit any place on the screen, but if you don't use any positioning, they are displayed in the order you write the code.

Lee
 
Upvote 0 Downvote
do you meean that i should asign them an absolute position??
can you show me an example please

thanx in advance
 
Upvote 0 Downvote
You should assign the width to divs and add float: left; or float: right; depending on where you want them to float and they will be next to each other providing there is enough space. Example:
Code: 
<div style="width: 100px; float: left; background: red;"></div>
<div style="width: 300px; float: left; background: blue;"></div>
This will make the two divs side to side, providing the space where they are is at least 400px wide (in this case, the browser window).
 
Upvote 0 Downvote
As much as you can fit in. Just make sure they have float and all their width (width + borders + margins + paddings) does not exceed their parent element's width. If it exceeds the last element will fall below.
 
Upvote 0 Downvote
IE tries to accomodate text in your boxes, that is why it adds extra height. If you tell it that text is 0px high, it will work. Check my revised code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
 <head>
  <title>Marcos With CSS</title>
  <style type="text/css">
body {
	background: black url([URL unfurl="true"]http://www.freewebs.com/soniclnd/sbck.gif);[/URL]
	margin: 20px;
	color: #ffffff;
	font-family: arial, sans-serif;
	font-size: 12px;
}

img {
	border-width: 0px;
	margin: 0px;
	padding: 0px;
	display: block;
}

.center {
	margin: auto auto;
}

.container {
	width: 500px;
	margin: 0px auto;
}

.title {
	width: 100%;
	height: 19px;
}

.lefttitle {
	float: left;
	width: 200px;
	height: 18px;
	padding: 0px 2px;
	border-left: #ffffff 1px solid;
	border-top: #ffffff 1px solid;
	background-color: #003399;
}

.ltmiddle {
	float: left;
	width: 15px;
	font-size: 0px;
}

.slantright {
	width: 15px;
	height: 15px;
	background-image: url([URL unfurl="true"]http://www.freewebs.com/soniclnd/right.gif);[/URL]
}

.filling {
	width: 15px;
	height: 4px;
	background-color: #003399;
}

.ltright {
	float: left;
	width: 280px;
	font-size: 0px;
}

.nothing {
	height: 15px;
}

.rightfilling {
	height: 3px;
	background-color: #003399;
	border-top: #ffffff 1px solid;
	border-right: #ffffff 1px solid;
}

.content {
	width: 494px;
	padding: 0px 2px;
	border: #ffffff 1px solid;
}

</style>
</head>
<body>

<div class="container">

	<div class="title">
		<div class="lefttitle">
		Title
		</div>
		<div class="ltmiddle">
			<div class="slantright"></div>
			<div class="filling"></div>
		</div>
		<div class="ltright">
			<div class="nothing"></div>
			<div class="rightfilling"></div>
		</div>
	</div>
	<div class="content">
	<br /><br /><br /><br />Content<br /><br /><br />
	</div>
</div>

</body>
</html>
Also, the top <xml> part shift IE from standards back to quirks mode, that's why I removed it.
 
Upvote 0 Downvote
he he.... you didn't have to go through the trouble of re-writing it... thanx a lot.. now it looks the same in IE as in FFX..... is there any way I can specify the character encoding without getting IE into quirks mode... (i've already tried using <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> and it does not validate as XHTML strict)
 
Upvote 0 Downvote
Meta tags are xhtml compliant. it is just that CAPS and unclosed tags are not. Try:
Code: 
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
That should validate ok.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
772
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
237
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
662
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top