splendour Posted January 19, 2023 Share Posted January 19, 2023 Hi! I've been trying to align my columns for a while now, still can't get it right. Funny enough I don't know what to do or try next. Don't bother asking, I'm a newbie. I'd appreciate some help. Thanks Quote Link to comment Share on other sites More sharing options...
Barand Posted January 19, 2023 Share Posted January 19, 2023 Quote Link to comment Share on other sites More sharing options...
ginerjm Posted January 19, 2023 Share Posted January 19, 2023 If you want our help you have to show us something. Are these columns part of a table? Or are they separate items that you want to be lined up using div tags or something? Paste your code here so we can look at it and give you suggestions. And not all of your code - just the part that is failing you. No pictures either. Just code Quote Link to comment Share on other sites More sharing options...
ginerjm Posted January 20, 2023 Share Posted January 20, 2023 I gave you a solution? I just thought I was giving you some help to know what we needed from you. Quote Link to comment Share on other sites More sharing options...
splendour Posted January 21, 2023 Author Share Posted January 21, 2023 (edited) @ginerjm Sorry I mistakenly press the "mark as solution button" Code <div id="bodyleft"><h1>Hello<h1></div> (css=#bodyleft{width:30%; height:50px; float:left} <div id="bodyright"><h1>hello<h1></div> (css=bodyright{width:60%; height:50px; float:left} I don't get any output if I don't add <h1> and some times changes made on css doesn't reflect at all Image1 is the output of the above code while image2 is what I expected Edited January 21, 2023 by splendour Quote Link to comment Share on other sites More sharing options...
Barand Posted January 21, 2023 Share Posted January 21, 2023 Your expectations are a little high if you expected that outputting "Hello" twice would produce image #2. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted January 21, 2023 Share Posted January 21, 2023 I have no idea what this line is supposed to be: (css=#bodyleft{width:30%; height:50px; float:left} mismatched parens and some type of code that is not in any manual I have yet to read. Quote Link to comment Share on other sites More sharing options...
kicken Posted January 22, 2023 Share Posted January 22, 2023 Don't try and do content columns with float. Use grid or flexbox. Quote Link to comment Share on other sites More sharing options...
jodunno Posted January 22, 2023 Share Posted January 22, 2023 10 hours ago, kicken said: Don't try and do content columns with float. Use grid or flexbox. please learn html5 and css3. Such advice leads to lazy front-end coding. And div elements default to left alignment, which means that one has not read the dtd and browser defaults. One can align divs anyway that one desires using css3. I am not going to design a site for someone. I have no free time to spare. However, here is a quick example of aligning the divs the way that you want them using html5 and css3. Also responsive using @media. <html> <head> <title></title> <style> div { display: block; position: relative; margin: 0px; padding: 0px; border: none; outline: none; opacity: 1; box-sizing: content-box; } div.columnContainer { background: #dcdcdc; min-width: 308px; max-width: 100%; box-sizing: content-box; } div.leftColumn { display: inline-block; width: 30%; background: #a0a0a0; vertical-align: top; } div.leftColumnRow { max-width: 100%; margin: 2px; padding: 6px; background: #f0f0f0; text-align: center; } div.rightColumn { display: inline-block; width: 69%; background: #a0a0a0; vertical-align: top; } div.rightColumnRow { max-width: 100%; margin: 2px; padding: 6px; background: #101010; } img.rightColumnImage1 { display: block; width: 200px; height: 50px; } @media (max-width: 600px) { div.leftColumn, div.rightColumn { display: block; min-width: 99%; } div.leftColumnRow, div.rightColumnRow { display: block; min-width: 92%; } } </style> </head> <body> <div class="columnContainer"> <div class="leftColumn"><!-- browsers default is left align and div is a block element, so no need to float or use a grid or flex --> <div class="leftColumnRow">Hello</div> <div class="leftColumnRow">Hello again</div> </div> <div class="rightColumn"> <div class="rightColumnRow"><img class="rightColumnImage1" src="no_float_grid_flex_equals_good_html5_programming.png"></img></div> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.