Getting <divs>'s to align next to each other
Question by Cameeob2003
I have the following code I am trying to get working correctly:
<div id="newspost_bg">
<article>
<p>
<header><h3>The fast red fox!</h3></header>
This is where the article resides in the article tag. This is good for SEO optimization.
<footer>Read More..</footer>
</p>
</article>
</div>
<div id="newspost_bg">
hello
</div>
<div id="newspost_bg">
hello
</div>
<div id="advertisement">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2139701283631933";
/* testing site */
google_ad_slot = "4831288817";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
</div>
Here is the css that goes with it:
#newspost_bg{
position: relative;
background-color: #d9dde1;
width:700px;
height:250px;
margin: 10px;
margin-left: 20px;
border: solid 10px #1d2631;
float:left;
}
#newspost_bg article{
position: relative;
margin-left: 20px;
}
#advertisement{
float: left;
background-color: #d9dde1;
width: 125px;
height: 605px;
margin: 10px;
}
The problem I’m experiencing is that the advertisements im trying to get setup will align with the last with the id of newspost_bg but im looking to havce it align to the top of the container it is in. I dont know if this is enough info, if not please let me know what you might need. Im new to the web coding scene so any and all critiques help me.
Answer by Anthony
Here are a few issues:
First, you have a div with an article inside, which, from what I can tell isn’t necessary, since the article can take the place of the div. Then you have a p to hold the header, article body, and footer, whenps should never have header elements (h1, h3, etc) even in the older spec and it breaks the idea of using an article tag.
Second, as mentioned, you have three divs all with the same id.
Third, you are using relative positioning for the main divs, which I don’t think helps with the floating (maybe I’m wrong), and relative positioning really only helps for child elements that are absolute positioned.
Having said that last point, I could be wrong, because the following works for me:
HTML:
<section id="articles">
<article class="newspost_bg">
<header><h3>The fast red fox!</h3></header>
<p>This is where the article resides in the article tag. This is good for SEO optimization.</p>
<footer>Read More..</footer>
</article>
<article class="newspost_bg">
hello
</article>
<article class="newspost_bg">
hello
</article>
</section>
<aside id="advertisement">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2139701283631933";
/* testing site */
google_ad_slot = "4831288817";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
</aside>
Notice that I’m using a section element to wrap the article elements and using the aside for the advertisment block. You could put divs inside either for further purposes, but the above is a light, utility-wrapper free document, which I think is a good place to start before adding in further divs, etc.
CSS:
#articles {
position: absolute;
}
#articles > article {
background-color: #d9dde1;
width:300px;
height:250px;
margin: 10px;
margin-left: 20px;
margin-right: -140px;
border: solid 10px #1d2631;
}
#advertisement {
float: right;
background-color: #d9dde1;
width: 125px;
height: 605px;
margin: 10px;
border: 1px dashed black;
}
Notice that the section, as the wrapper for the article elements, is set to absolute, and no other positioning, floats, or negative margins are set to the articles. The aside is set to float right, which makes it float to the top of it’s parent (in this case, we assume the body or html tag) which is also the parent of the section, so they are side by side.
I do admit that I’m not clear why the section (or div, or whatever) has to be set to absolute for the float to actually push the others aside, but I’m sure someone else here can clear that up.
Answer by Starx
You are attempting to configure three div width 700px to align next to each other. Unless the screen is really big, this is extremely complication.
Other than this You are using same id, which is semantically incorrect. Give class name instead.
Then modify your css to something like this
.newspost_bg{
position: relative;
background-color: #d9dde1;
width:700px;
height:250px;
margin: 10px;
margin-left: 20px;
border: solid 10px #1d2631;
float:left;
}
.newspost_bg article{
position: relative;
margin-left: 20px;
}
