I have the following HTML and CSS, where the logo floats on the left side, but I'd like to be able to have the content float on right side.
<html>
<body>
<div id="logo">
<img src="images/logo.gif" height="376" width="198" alt="LOGO" title="" />
</div>
<div id="maintext">
<p id="main">First paragraph</p>
<p>Second paragraph.</p>
</div>
<footer>...</footer>
</body>
</html>
In my CSS, the selector for logo is:
#logo {
display: block;
float: left;
}
#maintext {
padding: 0 0.5em 0 0.5em;
}
What's happening is that the logo "images/logo.gif" shows up to the left side of but on top of the footer. It should show up on the left side of the "maintext" selector.
Any ideas?
Add this CSS:
footer {
clear: both;
}
I do not quite understand... it would be:
float: right;
Related
I'm looking for the classic page layout:
Header 800 Pixel, Navi (left) 200 Pixel, Content (right) 600 Pixel
Is it possible to put this in 3 DIVs only?
<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="content">Content</div>
Because every layout I've found so far is built this way:
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Thanks!
Roman
You surely can do it the way you told.
The thing is that code :
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Will be easier to make and maintain. For example, you just need to specify a single margin-top on #panel to control margin between header and nav+content. With your code, you'll have to specify it twice, on #navi and on #content.
Don't think it's too complex-- just set the header to width 100%. Check it out: http://jsfiddle.net/ASy67/
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
And the CSS:
div {
height: 100px;
}
#header {
background: #f00;
width: 100%;
}
#left {
background: #0f0;
float: left;
width: 200px;
}
#right {
background: #f0f;
width: 600px;
}
With this example, the content does appear behind the left sidebar. You can fix it by either adding float: right; to the #right, or padding-left: 200px; to #right.
I'm working on the "About Us" header on this page
Basically the little div there with the images and blue "About Us" block was an image, but for SEO purposes, I'm now replacing it with a structure that can use an <h1>...</h1> tag.
As you can see, the layout of the images and header tag works perfectly, but it's pushed the right column of the page in under the content.
I've checked, and double-checked and it looks like all floats are properly contained (unless I missed something) so I'm not sure how to fix this.
Can anyone tell me what I'm doing wrong here?
The HTML:
<div class="page_header">
<div>
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-1.jpg">
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-2.jpg" alt="" />
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-3.jpg" alt="" />
<h1>About Us</h1>
</div>
</div>
The CSS:
/* Page Headers
----------------------------*/
.page_header div {
overflow: hidden;
min-width: 665px;
}
.page_header img, .page_header h1 {
float: left;
margin: 10px 10px 0 0;
}
.page_header img:nth-child(2) {
clear:right;
}
.page_header h1.about-us {
line-height: 90px;
background: #00f;
color: #fff;
padding: 0 42px;
}
Thanks in advance!
Hey Ortund Actually wrote a HTML markup in bit of improper way so you should write like this :-
<div id="main">
<div id="content">
<div id="sidebar-primary">
</div>
see the attached image its working fine through this method :-
That is because your <div id="sidebar-parimary"> should reside inside the <div id="main"> element.
Currently it is:
<div id="main">
<div id="content">...</div>
</div>
<div id="sidebar-primary">..</div>
it should be:
<div id="main">
<div id="content">...</div>
<div id="sidebar-primary">..</div>
</div>
I have a two-column layout. I have a #mainContainer div that contains all of the following (except the #footer):
Across the top: a header div (#intro)(contains a small gradient image),
and a #hero div (contains images)
To contain the two columns: a #content div
Within the #content div on the left: a #mainContent div
Within the #content div on the right: a #sideBar div
Across the bottom (outside the #mainContainer div): a #footer div on the bottom
(including a gradient image like the header div)
Simple, right? But I'm having trouble getting the #mainContainer div to be at the top of the browser (no spaces or that 6-8px default margin/padding all browsers have at the top) and getting the #footer div to span across the entire bottom of the browser window (not inside any of the Div's ). (disregard inline styles in footer). Could someone help me out?
UPDATED: ADDED HTML
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}
#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/
}
#intro {
/*top:0;*/
margin: 0;
text-align:left;
}
#hero {
width:960px;
padding-left:10px;
padding-right:10px
}
#content {
width:960px;
padding-left:10px;
padding-right:10px;
}
#mainContent_left {
float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}
#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}
#footer {
width:960px;
clear:both;
background:#cc9;
}
HTML:
<title>Descriptions </title>
<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>
<body>
<div id="mainContainer">
<div id="intro"><h2>introducing</h2></div>
<div id="Hero">
<ul>
<li class="name"></li>
<li class="textJoin">is a member of </li>
<li class="name"></li>
</ul>
</div>
<div id="content">
<div id="mainContent">
<h3>First Topic title</h3>
<p>floated left image and text</p>
<p>Some content</p>
<p>Some content</p>
<h3>Second Topic title</h3>
<p>Some content</p>
<p>Image here</p>
<h3>Third Topic title</h3>
<p>(floated left image here) Some text</p>
<h3>Fourth Topic title</h3>
<p>(floated left image here) Some text</p>>
<h3>Fifth Topic title</h3>
<p>(floated left image here) Some text</p>
<p>Image here</p>
<p>(link to FAQ page)</p>
</div>
<div id="sideBar">sidebar content
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer_warranty">footer content
<div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
<div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
<p style="clear:both;" />
</div>
</div>
<p style="clear:both;" />
</div>
</body>
</html>
I am unable to reproduce your problem. However, I have created a fiddle for you, where I have also added some CSS reset rules which should take care of a problem such as this, cross any and all browsers.
You should always use a reset CSS when you start a new site. That way, it's all on your terms and you don't have to "code away" specific browser behaviour.
I have also created some placeholder code since you did not provide any.
I hope the reset fixes your problem.
http://jsfiddle.net/dekket/eERsK/
Edit:
Check this new fiddle. Out to work.
http://jsfiddle.net/dekket/6bTkZ/
Try importing Meyer's reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
try adding float:left and overflow:hidden to your #mainContainer
you need to set the html and body css margin and padding properties to 0.
use the following in your css file
html, body {
margin: 0;
padding: 0;
}
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }
I'm trying to slice an box with rounded corners. The image is sliced horizontal in 3parts (top-middle-bottom). The problem in IE7 is that the top div is larger than the actual size I set.
Here is the HTML & CSS code
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle' >
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
.recent-box {
width: 127px;
float:left;
display:block;
}
.recent-box-top {
float:left;
background-image: url('images/recent-foto-top.png');
background-repeat:no-repeat;
width: 100%;
}
.recent-box-middle {
float:left;
background-image: url('images/recent-foto-middle.png');
background-repeat:repeat-y;
width: 100%;
}
.recent-box-bottom {
float:left;
background-image: url('images/recent-foto-bottom.png');
background-repeat:no-repeat;
width: 100%;
}
Thanks for helping me out!
Ward
The font-size and line-height properties might be the offensive ones. If you are not placing any text in the top box, use something like
.recent-box-top {
font-size: 0;
line-height: 0;
}
Found the solution!
Just put in the div and it works like a charm!
found on http://archivist.incutio.com/viewlist/css-discuss/39150