I used to design layouts using tables, but now I'm trying it out with divs.
However, I'm still struggling to get the layout right. It's not as straightforward as using tables. For instance, my code looks like this:
var html_output =
"<div id='infoPlanet' style='width:400px;'>"+
" <div id='gambarPlanet' style='padding: 0px; width:200px; margin-left:auto; margin-right: 200px;'>"+
" <IMG SRC='\\Planets\\planet"+gambarPlanet+ ".jpg'>"+
" </div>"+
" <div id='kadarSehari' style='padding: 0px; width:200px; margin-left:auto; margin-right: 200px;'>"+
" <table class='kadarPlanet'>"+
" <tr><td>Kadar Kelahiran</td><td>"+kadarmanusia+"</td></tr>"+
" <tr><td>Kadar Perlombongan</td><td>"+kadarkristal+"</td></tr>"+
" <tr><td>Kadar Penjanaan</td><td>"+kadarnadir+"</td></tr>"+
" </table>"+
" </div>"+
"</div>"
Despite my efforts, gambarPlanet ends up on the left and kadarSehari on the right. How can I make kadarSehari appear below gambarPlanet?
I adjusted the width of gambarPlanet to 300px so that gambarPlanet.width + kadarSehari.width = 300+200 > 400, but kadarSehari spills over the right boundary of the main div (infoPlanet). The kadarSehari div refuses to move below gambarPlanet.
I've experimented with gambarPlanet.style.float="top" and kadarSehari.style.float="bottom", but nothing changes. I've also tried position: absolute and position: static, without success.
If you wouldn't mind, could you advise me on the correct structure for two divs: 1) to display next to each other (like my current output, which is more guesswork than understanding) 2) to stack on top of each other
And if I wanted four divs: left, middle-left, middle-right, right - how should I organize the divs?
I could achieve this in 5 mins with , but I've spent 6 hours attempting to code it with divs and have hit a wall.
If you're able to help, please guide me on what steps to take. Hopefully, I can learn something new.