Let’s look at the content of the #intro div.
1. The #symbol div
Contains three divs that you wish to be positioned side by side. Being a div, it is a block element by default so does not need display:block; to be applied in CSS.
As a block element it occupies the width of the parent i.e. #intro.
#intro has a set width of 576px so that is the width occupied by #symbol.
2. A paragraph (p)
The position is set within rules for Content p (margin)) and #intro p (padding-top).
3. An image (img)
The position is set by margins within #intro img. A left margin of 580px pushes it outside the width of #intro, and top margin of -250px pulls it up from its normal position in the flow, where it would sit below the paragraph.
***
Is there a reason you’ve specified a width of 576px and height of 350px for #intro when its content extends beyond those dimensions?
If you wish there to be two sections side by side in #intro: #symbol and the paragraph on the left and the image on the right, then a different approach to positioning should be used, as well as setting #intro to be wide enough for its content or allowing it to extend to fit its parent, Content by not setting a width.
This example adds a floated container for the left content, allowing the image to sit on its right without any need for margin positioning jiggery-pokery. A width is set on #symbol, so you can center it within its parent if required.
<div id="intro">
<div id="intro_one" >
<div id="symbol">
<div class="symbol_visual"></div>
<div class="symbol_create"></div>
<div class="symbol_watch"></div>
<!-- #symbol --></div>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
<!-- #intro_one --></div>
<img src="http://www.thecreativesheep.ca/construction/block.jpg" alt="LogoGraphic">
<!-- #intro --></div>
/* These rules replace the existing ones for the same selectors */
#intro {
margin: 34px 20px 0 20px; /* balanced left and right, which you may not want */
background: #FF8000;
}
#intro_one {
float: left;
width: 576px;
background: #AA8000;
}
#symbol {
overflow:hidden; /* contain the floated children */
background: #CC9000;
margin: 0px auto; /* if you want to center #symbol */
width: 342px; /* to allow centering */
}
#symbol div {
border: 1px solid green;
float: left;
height: 150px;
margin: 4px 0 4px 4px;
width: 100px;
}
.symbol_visual {
background: yellow;
}
.symbol_create {
background: red;
}
.symbol_watch {
background: blue;
width: 120px;
}
#intro p {
margin-top:10px;
}
#intro img {
margin-left: 6px; /* or give #intro_one the ame margin-right value */
}
If this isn’t what you’re aiming for then we need to know precisely how you want these three elements to appear in relation to one another and the rest of the layout, so please knock together a simple mockup.
If not, remove the comma.