Elements beside each other

Question

sirlink99 56 Practically a Master Poster

14 Years Ago

I have website, which is still under development, and I am wondering why, when I go to Termékek it displays them all under each other, when in firefox, and opera it doesn't.

here is the css

*{
	margin: 0;
	padding: 0;	
}
*{
	text-decoration: none;
}

.wrapper {
	width: 800px;
	height: auto;
	border: 1px solid;
	margin: 10px auto 0 auto;
}
.header {
	width: 800px;
	height: 150px;
	background-image:url('Images/header.png');
	background-repeat: no-repeat;
}
.navbar {
	width: 800px;
	height: 25px;
	background-image:url('Images/button.png');
	background-repeat: repeat-x;
	
}
.button a {
	float: left;
	width: 200px;
	height: 25px;
	line-height: 20px;
	font-family: Arial;
	font-size: 13px;
	color: #000;
	font-weight: bold;
	text-align: center;
}
.button a:hover {
	float: left;
	width: 200px;
	height: 25px;
	line-height: 20px;
	font-family: Arial;
	font-size: 13px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background-image:url('Images/button_down.png');
	background-repeat: repeat-x;
}
.body {
	
	width: 800px;
	height: auto;
	font-family: Arial;
	font-size: 11px;
	color: #000;
	background: url('Images/backgTrans.png');
	
}


div.textbody {
	padding: 10px;
	color: #000000;
	font-weight: bold;
	
	
	
}
div.textbody h1 {
	float: left;
}

div.textbody p{
	font-size: 15px;
	font-weight:bold;
    color:#000000;	
}
div.textbody img{
	padding: 5px;
}


.leftDiv{
	 position: relative;
     margin-right: 10px;
     display: inline;
}
.productsDiv {
	display: inline-block;
	padding: 20px;
	font-size: 14px;
}
.important h1{
}

Also another quick question when I view it in firefox all of the elements are at the same height (the top of the pictures are in line), but when I view it in opera one of them is one <br /> higher. Is there a way to fix this?

Thanks for any help.

user-interface web-design

2 Contributors
6 Replies
114 Views
16 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by sirlink99

Dani AI

Generated 9 Months Ago

A quick practical note that ties together the thread: already tracked down the markup error (missing nested div), and pointed to inline-block cross‑browser quirks. After fixing markup, the remaining symptom — one product sitting a hair higher in Opera — is almost always caused by inline formatting context (baseline alignment or image descenders) or by the small whitespace that appears between inline-block elements.

Two low-effort fixes to try first:

Force the product boxes to align at the top of the line box.
Remove the image baseline gap by making images block-level.

/* add to your existing rules */
.productsDiv { vertical-align: top; }

.productsDiv img { display: block; }

If you still see gaps between inline-block items, either remove the literal whitespace in the HTML (what was hinting at) or use the CSS technique of collapsing parent font-size, or convert to flexbox for a more robust layout. Example modern alternative:

/* wrap all product blocks and use flexbox */
.productsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

For references and deeper explanation see MDN on vertical-align (vertical-align on MDN), CSS-Tricks on inline-block spacing (Fighting the space between inline-block elements), and MDN’s Flexbox guide (Flexbox basics). Final troubleshooting checklist: validate HTML (W3C validator), inspect computed styles in the browser devtools, and remember to restore child font sizes if you use the font-size:0 trick.

All 6 Replies

lps 71 Posting Pro in Training

14 Years Ago

Try refer this: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

lps 71 Posting Pro in Training

14 Years Ago

please enclose your html code for usage. As in my personal experience, opera does read the line break of coding. try joining the coding of div so that there is no space between 2 div: </div><div>

Edited 14 Years Ago by lps because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sirlink99 56 Practically a Master Poster · Answer 1 · 2011-12-29T09:01:10+00:00

Thanks that fixed the first error, but now how come one item in opera is a <br /> higher then the other ones?

sirlink99 56 Practically a Master Poster · Answer 2 · 2011-12-29T09:47:22+00:00

here is the HTML

<!DOCTYPE html>

<head> 
	<title>Website Name</title>
	<meta http-equiv="Content-Type" content="text/html; charSet=UTF-8"> 
    <link rel="stylesheet" href="styles.css" media="screen" />
</head>

<body>
	<div class="wrapper">
		<center>
		<div class="header">
		</div>
		<div class="navbar">
			<div class="button"><a href="index.php">Főoldal</a></div>
			<div class="button"><a href="products.php">Termékek</a></div>
			<div class="button"><a href="about.php">Rólunk</a></div>
			<div class="button"><a href="contact.php">Elérhetőség</a></div>

			
		</div>
		
		<div class="body">
			<h1>Termékek</h1>
			<br />
			<div class="productsDiv">
				<div>
					<a href="fa.php">
						<img src="Images/fa.jpg" width="125px" height="125px"/>
						<p>Faáruk<br /><br /><br /></p>
						
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				
					<a href="villany.php">
						<img src="Images/skapocs.jpg" width="125px" height="125px"/>
						<p>Villanyszerelési anyagok <br /><br /><br /></p>
					</a>
				
			</div>
			<div class="productsDiv">
				<div>
					<a href="karnis.php">
						<img src="Images/karnis.jpg" width="125px" height="125px"/>
						<p>karnisok <br />
						ezer aprócikk <br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="zár.php">
						<img src="Images/lock.jpg" width="125px" height="125px"/>
						<p>Zárak, Lakatok<br /><br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="lanc.php">
						<img src="Images/chain.jpg" width="125px" height="125px"/>
						<p>Láncok, Kötelek, <br />Drótkötelek<br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="rogzites.php">
						<img src="Images/screw.jpg" width="125px" height="125px"/>
						<p>Rögzités teknika, <br /> Kötő ellemek<br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="furo.php">
						<img src="Images/furo.jpg" width="125px" height="125px"/>
						<p>Fúrók, Vágókorongok<br /><br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="csiszolo.php">
						<img src="Images/csiszol.jpg" width="125px" height="125px"/>
						<p>Csiszolo anyagok,<br /> Festő szerszámok, <br /> Fóliák ragasztószallagok</p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="kezi.php">
						<img src="Images/fogo.jpg" width="125px" height="125px"/>
						<p>Kéziszerszamok, <br />Electromos gépek <br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="ragaszto.php">
						<img src="Images/szilikon.jpg" width="125px" height="125px"/>
						<p>Ragasztók, szilikonok, <br /> purhabok, vegyiáruk<br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="kerekek.php">
						<img src="Images/kerek.jpg" width="125px" height="125px"/>
						<p>Kerekek, görgők, <br />Fogasok, Butorvasalások<br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="kerti.php">
						<img src="Images/gereblye.jpg" width="125px" height="125px"/>
						<p>Kerti szerszámok<br /><br /><br /></p>
					</a>
					
				</div>
			</div>
			<div class="productsDiv">
				<div>
					<a href="vedelem.php">
						<img src="Images/vedo.jpg" width="125px" height="125px"/>
						<p>Munkavédelem<br /><br /><br /></p>
					</a>
				</div>
			</div>
			
			
		</div>
		
		
		
		
		</center>
	</div>
</body>
</html>

and changing the divs did not make a difference.

lps 71 Posting Pro in Training · Answer 3 · 2011-12-29T09:50:47+00:00

please remove the line break between divs. For example:

<div class="productsDiv">
				<div>
					<a href="kerti.php">
						<img src="Images/gereblye.jpg" width="125px" height="125px"/>
						<p>Kerti szerszámok<br /><br /><br /></p>
					</a>
 
				</div>
			</div><div class="productsDiv">
				<div>
					<a href="vedelem.php">
						<img src="Images/vedo.jpg" width="125px" height="125px"/>
						<p>Munkavédelem<br /><br /><br /></p>
					</a>
				</div>
			</div>

Please try if this work

sirlink99 56 Practically a Master Poster · Answer 4 · 2011-12-29T10:29:02+00:00

nvm I found it. I was missing a set of divs in the productsDiv

this

<div class="productsDiv">
 
					<a href="villany.php">
						<img src="Images/skapocs.jpg" width="125px" height="125px"/>
						<p>Villanyszerelési anyagok <br /><br /><br /></p>
					</a>
 
			</div>

should have been this

<div class="productsDiv">
				<div>
						<a href="villany.php">
							<img src="Images/skapocs.jpg" width="125px" height="125px"/>
							<p>Villanyszerelési anyagok <br /><br /><br /></p>
						</a>
					</div>
			</div>

Thanks for your help

Elements beside each other

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers