Hey guys! Need some help with css, I'm trying to recreate the bbc.com website for practice. I have gotten this far till now:- srachit.com/bbc
The problem is I want to align the transport article to the right of the big one, but it does not seem to position correctly. You can see the sourcecode of the page to see what I've done, I've done internal css for this.
Beginner CSS Help
Re: Beginner CSS Help
All right, found a way to align that article the way you want.
First of all, declare a new div id in the style area:
Second, add the position: relative; to the maincontent & transportarticle divs:
Now, put the new #miniwrap div around your transport article div, and also include the title inside the #miniwrap div:
This should do it
First of all, declare a new div id in the style area:
Code: Select all
#miniwrap {
margin-left: 15px;
float:left;
}
Code: Select all
#maincontent{
float:left;
width: 624px;
font-size: 1em;
color: #3C3C3C;
position: relative;
}
#transportarticle{
background-color: #F1F1EF;
width: 336px;
float:left;
position: relative;
}
Code: Select all
<div id="miniwrap">
<h3>Transport</h3>
<div id="transportarticle">
<img src="images/transport.jpg" />
<h4>How do you make trains go faster?</h4><br />
<p> Pushing trains to go faster isn’t simply a matter of increasing power. Katia Moskvitch discovers why the quest for more speed has come with drawbacks.</p>
</div>
</div>
Help support the Darcan project: http://www.gofundme.com/dbm620
Re: Beginner CSS Help
Not sure if its my computer, but although it got all the content together, it did not have the effect I desired. I'm trying to get the entire transport article to come to the right of the main article. Thanks for your help till here!
- hallsofvallhalla
- Site Admin
- Posts: 12031
- Joined: Wed Apr 22, 2009 11:29 pm
Re: Beginner CSS Help
that would be float. or you could use bootstrap and just use the grid system.
Re: Beginner CSS Help
It's all about seeing it in boxes. Web design can be tricky as due to floating as halls mentioned.
http://code.tutsplus.com/tutorials/mast ... -net-13794
http://code.tutsplus.com/tutorials/mast ... -net-13794
Fighting for peace is declaring war on war. If you want peace be peaceful.