Jump to content

floating image in DIV


Alfraganus

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...