Peter Robinson Posted December 15, 2020 Share Posted December 15, 2020 My aim was to place title on the left and my table of contents link on the right all on one line within my div tag which defines the color. only I loose the color defined in my div. Any suggestions how to solve this ? <!DOCTYPE html> <html> <head> <title>Test Page Title</title> <style> .alignleft { float: left; } .alignright { float: right; } div.title1 {background-color:#07E9DA;} </style> </head> <body> <div> <h1><a name="TOC"></a>Table of Contents</h1> <ol> <li><a href="#section1">Section 1</a> </ol> </div> <div class="title1"> <!-- <h2><a name="section1" class="alignleft">Section 1</a></h2> <a href="#TOC" class="alignright">ToC</a></p> --> <a name="section1" class="alignleft">Section 1</a> <a class="alignright" href="#toc">toc</a> </div> <div> <p>This is a paragraph.</p> </div> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 15, 2020 Share Posted December 15, 2020 (edited) The div does not detect boundary of floated elements so it collapses to zero height, so no height no background. Fix by adding overflow:hidden to title1 class. Edited December 15, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
shaili_shah Posted December 18, 2020 Share Posted December 18, 2020 If you want output like below attached snap than just place your paragraph tag in above div tag. Hope it helps. If you want other solution rather than this then tell me. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 18, 2020 Share Posted December 18, 2020 The modern way is to use .clearfix::after { content: ""; clear: both; display: table; } On any parent element that has floated child elements. (Add class clearfix to title1 element). Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now