Databases
StackOverflow2013
Postsdbo
POAlign or flat an image left of its immediate parent div only
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAlign or flat an image left of its immediate parent div only
    text
    copied!<p>I have a div 'container' which holds all my content and is set for 80% width. Inside that div I have div 'tophead' which contains a logo and a nav bar at 100% (but it only reaches the parent 80%). Then I have 'maincont' which is inside the 'container' div and has an image. Id like this image to be left aligned with the side of the 'container' div so that there is still that 20% space left open. If I float left or align left it shows up all the way to the left of the screen over the 20% id like blank. Any idea how to fix this would be very much appreciated.</p> <p>Bonus thanks if someone can figure out why the image overlaps my nav bar.</p> <p>jsFiddle: <a href="http://jsfiddle.net/4JKus/4/" rel="nofollow">http://jsfiddle.net/4JKus/4/</a></p> <p>code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" type="text/css" href="ccoheader.css"&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div align="center" id="tophead"&gt; &lt;img src="images/logo.png" alt="logo"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" title="About Us"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Biographies"&gt;Biographies&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Services"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Careers"&gt;Careers&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div align="center" id="maincont"&gt; &lt;img src="images/secondimage.png" alt="image"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>CSS:</p> <pre><code>html, body, #container { height: 100%; width: 100%; margin: 0; } #tophead { height: 20%; width: 80%; margin: auto; } #tophead img { height: 100%; width: auto%; } #tophead ul { list-style: none; display: inline-block; font-size: 0; } #tophead li { display: inline-block; } #tophead a { background: #2dbaf0; color: #fff; display: block; font-size: 16px; font-family: "arial"; font-weight: bold; padding: 0 20px; line-height: 38px; text-transform: uppercase; text-decoration: none; -webkit-transition-property: background; -webkit-transition-duration: .2s; -webkit-transition-timing-function: linear; } #tophead a:hover { background: #f8a52b; color: #fff; } #tophead li:first-child a { border-left: none; border-radius: 5px 0 0 5px; } #tophead li:last-child a { border-right: none; border-radius: 0 5px 5px 0; } #maincont { height: 68%; width: 80%; padding-top: 2%; } #maincont img{ height: 100%; width: auto; border-radius: 30px; float: left; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload