I am having trouble with keeping a navigation list aligned inline with a block of text that includes an image. My issue arises when I expand the browser to full screen size, causing the list to overlap the text block. Here is the HTML code snippet:
<body>
<ul>
<li>Something1</li>
<li>Something2</li>
<li>Something3</li>
</ul>
<div>
<section>
<img>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</section>
</div>
</body>
Below is the CSS code used:
ul{
width:15%;
font-family:arial;
font-size:12px;
float:left;
border:2px solid black;
}
section{
width:80%;
font-family:arial;
font-size:12px;
float:left;
padding:0;
border:2px solid black;
}