Page 1 of 1
Beginner CSS Help
Posted: Tue Aug 26, 2014 9:42 am
by srachit
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.
Re: Beginner CSS Help
Posted: Tue Aug 26, 2014 12:03 pm
by ApaKhe
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:
Code: Select all
#miniwrap {
margin-left: 15px;
float:left;
}
Second, add the position: relative; to the maincontent & transportarticle divs:
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;
}
Now, put the new #miniwrap div around your transport article div, and also include the title inside the #miniwrap div:
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>
This should do it
Re: Beginner CSS Help
Posted: Sun Aug 31, 2014 5:30 pm
by srachit
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!
Re: Beginner CSS Help
Posted: Mon Sep 01, 2014 3:51 pm
by hallsofvallhalla
that would be float. or you could use bootstrap and just use the grid system.
Re: Beginner CSS Help
Posted: Tue Sep 02, 2014 3:43 pm
by Chris
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