Alfraganus Posted July 28, 2015 Share Posted July 28, 2015 hi programmers I was trying to float my image to left side of my page, but somehow my div element is disturbing it, it is stating in center of my page, is there any possibility to float image in DIV element? Link to comment Share on other sites More sharing options...
Ingolme Posted July 28, 2015 Share Posted July 28, 2015 Any amount of styling on the div or image could be causing it. Show the HTML and CSS that you are using. 1 Link to comment Share on other sites More sharing options...
Alfraganus Posted July 28, 2015 Author Share Posted July 28, 2015 Thank you for your reply, here is my begginning part of codes ----HTML---- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>the Ottomon Empire</title> <link href="design.css" rel="stylesheet" type="text/css" media="screen"/> </head> <body> <header> <div class="headerContainer"> <h1><a href="">Usmonli Turklar Imperiyasi </a></h1> <div id="navcontainer"> <img src="images/ottomon.jpg"> (this is my picture that is not floating left) <ul id="navlist"> <li id="active"><a href="#">Usmonli Turklar Tarixi</a></li> <li> <a href="#">Imperiya yuksalishi </a></li> <li> <a href="#">Hukmdorlar</a></li> ---CSS--- body { background: url(images/bg.jpg) center center fixed no-repeat; -moz-background-size:cover; background-size: cover; } #header { border-bottom: 1px solid #c0dffb; padding-bottom: 30px; } .container { width: 960px; margin: 0 auto; } .headerContainer { width: 960px; margin: 0 auto; } header h1 { float: left; } header h1 a { font-family: 'lobster', sans-serif; font-size: 42px; color: #00adff; text-decoration: none; } img { float:left; margin: 0 0 10px 10px; width: 150px; height: 100px; overflow: auto; } #navcontainer { float: right; padding: 30px 0 0 0; } ul#navlist { margin-left: 0; padding-left: 0; white-space: nowrap; } #navlist li { display: inline; list-style-type: none; } #navlist a { padding: 10px 20px; font-size: 24px; font-family: 'lobster', sans-serif; text-decoration: none; color: #677a83; text-shadow:0px 0px, 1px 1 px #ffffff; } #navlist a:hover { color: #fff; text-decoration: none; text-shadow:none; background: #00adff; border-radius: 0px; Link to comment Share on other sites More sharing options...
Ingolme Posted July 28, 2015 Share Posted July 28, 2015 The <div> that the image is inside is floated to the right. The image is within the bounds of the <div> that contains it and can not be any further left than the left edge. You can either put the image outside of the div, or remove the "float: right" rule from the #navcontainer div. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 28, 2015 Share Posted July 28, 2015 Navigation is floated right, it width is determined by content, if content only make the width 3/4 of the total width available to it, the left edge of navigation will be 1/4 of the width away from leftmost edge of parent element, and the image within it will only be able to float right to this left edge that is 1/4 width away from its parent elements leftmost edge. The navigation needs the float removed or styled in such away that it fills the entire width of its parent that is available to it. 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