How to create a 2 column layout in xhtml without CSS
Question
Need your help writing the proper code for a 2 column layout in XHTML using online inline styling.
Essentially I am trying to redesign the overview page of my companies wiki to have a 2 column layout with links in each column that takes users into a different section of the wiki.
Since I don't have much knowledge of XHTML, I'm using HTML + a converter. When I convert the HTML to XHTML and input it into the wiki page, I end up with my block elements overlapping one another. Here's what I've written, any pointers would be appreciated:
<body>
<div id="left" style="display: block;">
<ul style="float:left; width:300px; height:400px;">
<a href="">
<img src=""> </a> </br>
<h4>Ways to Get Involved</h4> </br>
<a href="">Design Thinking with Jacquelyn</a> </br>
<a href="">Running Meetings </a> </br>
<a href="">Preparing and Running Playbacks</a> </br>
<a href="">Working with Users</a> </br>
<a href="">See all topics</a> </br>
<a href="">
<img src=""> </a> </br>
<a href=""> </br> Find and share useful tools for day-to-day design work</a> </br>
</ul>
</div>
<div id="right" style="float: left; width: 300px; height:400px;">
<ul style="float:left">
<a href="">
<img src=""> </a> </br>
<h4>Latest Posts</h4>
<a href="">Slimming down on features for a more delightful experience</a> </br>
<a href="">CitiBike: First 100 Days Visualized</a> </br>
<a href="">Development and Design Go Hand-in-Hand When Creating Smarter Cities</a> </br>
<a href="">Story 2.0: The Surprising Thing About the Next Wave of Narrative</a> </br>
<a href="">See all blog posts</a> </br>
<a href="">
<img src=""> </a> </br>
<a href="">Get engaged, educated and empowered to do Design Thinking</a>
Anyway-- any/ all help very much appreciated. Am under EOD Friday (Today) deadline on this.
2 answers
solution1
0 2013-11-01 16:45:25
Use :
style="float: left; width: 300px; height:400px; "
on the outer DIVs only. Do not float the contents (UL)
BTW: Inline styles are CSS too.
solution2
0 2013-11-01 16:49:46
You can set the container divs to width="45%" . This will let them both fit in the overall 100% of the screen, but will also allow some room for padding.
Floating one left and the other right will help, I guess. I would rather use display:inline-block; though.
Here, have a fiddle .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.