Beginner CSS Help

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
srachit
Posts: 291
Joined: Sat Jan 05, 2013 6:10 pm

Beginner CSS Help

Post 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.
User avatar
ApaKhe
Posts: 18
Joined: Fri Sep 06, 2013 2:55 pm

Re: Beginner CSS Help

Post 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
Help support the Darcan project: http://www.gofundme.com/dbm620 :)
User avatar
srachit
Posts: 291
Joined: Sat Jan 05, 2013 6:10 pm

Re: Beginner CSS Help

Post 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! :)
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Beginner CSS Help

Post by hallsofvallhalla »

that would be float. or you could use bootstrap and just use the grid system.
User avatar
Chris
Posts: 1580
Joined: Wed Sep 30, 2009 7:22 pm

Re: Beginner CSS Help

Post 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
Fighting for peace is declaring war on war. If you want peace be peaceful.
Post Reply

Return to “Beginner Help and Support”