Member Avatar for davy_yg

index.html

<div id="side">
<div id="boxcontainer">			
       <h3>Get In Touch With Us</h3>
	<div id="image"><img src="images/pic2.png" ALIGN=LEFT></div><div id="text">Request more <br />information from <br />OCK&Associates</div>
          <br></div><br>
                                   
<div id="boxcontainer">                                      
       <h3>Get In Touch With Us</h3>    
         <div id="image"><img src="images/pic2.png" ALIGN=LEFT /></div><div id="text">Request more <br />information from <br />OCK&Associates</div>					
</div></div>

style.css

#content #boxcontainer image{ 
	margin: 5px 0 0 5px;
	padding: 0 10px 0 0;
	}				
		
#content #boxcontainer text{
	margin: 50px 0 0 0;						
	}

Hi, the text just a little bit too high. How to place it lower? I have tried to change the text margin but it doesn't change anything.

  • 2 Contributors
  • 2 Replies
  • 447 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by davy_yg

Dani AI

Generated

The root cause was a selector typo: the original rules were written against element names like image and text, so the browser never applied them. Good catch — adding the # fixed that. ’s suggestion to use position: relative/top will move the element, but it’s brittle for layout tweaks because it doesn’t affect document flow. Prefer margins/padding or a layout method that explicitly controls vertical alignment.

For repeated boxes, don’t reuse an ID. IDs must be unique; use a class (for example .box) for each repeated container. Avoid the deprecated ALIGN attribute and manual <br>s for spacing — use CSS and add an alt to images for accessibility.

A modern, robust approach is flexbox (keeps HTML simple and makes vertical alignment predictable):

<div class="box">
  <img class="thumb" src="images/pic2.png" alt="thumbnail">
  <div class="text">Request more information from OCK &amp; Associates</div>
</div>
.box {
  display: flex;
  gap: 10px;
  align-items: center;    /* vertically centers image + text */
}
.box .thumb { width: 60px; height: auto; }
.box .text  { margin: 0; } /* tweak margin-top if you want it lower */

If you must keep floats, contain the float and tweak the text margin:

.thumb { float: left; margin-right: 10px; }
.box   { overflow: hidden; } /* clearfix */
.box .text { margin-top: 6px; }

Troubleshooting checklist: use browser devtools to inspect the computed styles and selector specificity, confirm IDs vs classes, check for other rules overriding your margins, and avoid using position:relative/top for everyday spacing.

Recommended Answers

All 2 Replies

Member Avatar for lps

How about using position:relative and adjust the position by using top:30px, for example.

Edited by lps because: n/a
Member Avatar for davy_yg

still nothing happens.

----


Nevermind, I find the solution.

#content #boxcontainer #text{
	margin: 10px 0 0 0;							
	}

Forgot to place the "#" sign.

Edited by davy_yg because: n/a
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.