 <div> help, Multiple <div>'s inside a <div>? |
  |
| TorjeSM |
 Oct 22 2014, 04:39 AM
Post
#1
|
|
Group: Members Posts: 1 Joined: 22-October 14 Member No.: 21,703  |
Hey, I am a student learning the basics of html. And I got a task to make a html file which contains a colored header, with a text centered in it. A picture or a gif under the header, and three divisions inside a division thats going to be filled with text.
Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Nyan cat </title> </head> <body text="white" bgcolor="#333333"> <div style="width:100%;height:70px;background-color:black;"> <center> <h1> Nyan Cat </h1> </center> </div> <center> <img src="Nyan cat.gif" alt="Nyan Cat" style="width:45%;" /> </center> <div style="width:100%;height:210px;background-color:black;"> <div style="width:33.333%;height:100%;background-color:white;"> </div> <div style="width:33.333%;height:100%;background-color:blue;"> </div> </div> </body> </html> Screenshot off result: http://prntscr.com/4yjqhd What Im basically asking for help with is how to get the blue division next to the white. And, I need a third division in the black one, so how may I add it? (I used nyan cat just to have something, this is just practise. |
  |
 
|
| Frederiek |
Oct 22 2014, 09:13 AM
Post
#2
|
|
Programming Fanatic  Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Use float: left; to put the white and blue DIV next to each other.
And for a third DIV inside the black one, just add another DIV as you did for the white and blue ones and float that too. Some remarks though. <center> is deprecated, use CSS margin instead (margin: 0 auto;) Instead of using inline styles, create CLASSes or IDs and use those as selectors for CSS, as STYLE block inside HEAD or an external CSS file. A DIV is a block-level element, which means that it will take the entire width of the browser window, unless you set a width lower than 100%. So, setting a div to width: 100%; serves no use, it does that by default. Some references: http://htmlhelp.com/reference/css/structure.html http://www.456bereastreet.com/archive/2005...lectors_part_1/ http://www.htmlhelp.com/reference/css/style-html.html http://css.maxdesign.com.au/floatutorial/ |
|
|
|
| abivillanueva |
Nov 24 2014, 01:49 AM
Post
#3
|
|
Group: Members Posts: 2 Joined: 11-November 14 From: Unit 1, 14 Kohl Street, Upper Coomera Member No.: 21,798 |
|
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 24th April 2024 - 04:55 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC