I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
Related
I didn't have code to show my question but I pulled some off the w3schools website. Here's an example they give you to play with clear.
<style type="text/css">
img
{
float:left;
}
p.clear
{
clear:left;
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" /><p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
My question is about using the clear property. Why is it that you can't move the cleared element DOWN any farther away from the floated element that comes before it?
Meaning, let's say I wanted there to be a couple of blank lines between the text paragraph and that image for whatever reason. Page breaks don't seem to work.
If I add relative positioning to the paragraph and give it a larger top margin, that works BUT in the example I had that I no longer have to show you anymore, it was a cleared div under a floated div, not a cleared paragraph under a floated image, and in THAT case, even relative positioning to add a margin didn't work.
What, exactly, does clear do to how the element you apply it to flows with the rest of the document? I know what clear DOES. I know it's saying which side no previous floated object can be on but what does it do to the element ITSELF? Does a cleared element get attached to the same flow as the floated elements somehow?
The clear property specifies which sides of the element's box cannot be adjacent to floated elements, and only does so when these floated elements are in the same block formatting conext.
From SitePoint:
Clearing adds space above the cleared element's top margin until it's
clear of the affected floated boxes. As a result, we can’t use the top
margin on the cleared element if we want a specific amount of space
between it and the floated box.
Attempting to put other elements that have not been cleared after the floated elements will essentially keep in them in the same context. This has to do simply with the way floating works.
If you wanted to put blank lines in between the image and the paragraph, I'd add a margin-bottom to the img element:
<style type="text/css">
img
{
float: left;
margin-bottom: 10px;
}
p.clear
{
clear: both;
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" />
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
I could go on, but I think this will tell you everything you need to know about floating and the CSS clear property:
http://reference.sitepoint.com/css/floatclear
And on that note, I highly recommend against w3schools, as they are known to have faulty information. See:
http://w3fools.com/
Just but a <br class="clear" /> in front of the paragraph, or add a top margin to it.
I have this fiddle
http://jsfiddle.net/JsZ9q/5/
I am trying to get the div with the 'b' letters to have its left edge be up against the right edge of the div with the 'a' letters.
The trick is, in the actual application, the left property of the left div is not set (meaning its left position will change), and there is variable number of a characters (meaning its width will change).
Update -- i added some more divs to be more clear. In all cases, I want the 'right' div to have its left edge up against the right edge of the left div, which can vary in width due to its content. Also, not shown, is that the left property of the left div can vary across rows.
Try:
<html>
<head></head>
<body>
<div>
<div style="display:inline">b</div>
<div style="display:inline">a</div>
</div>
</body>
</html>
Note: Span are inherently inline:
The above should behave the same as this:
<html>
<head></head>
<body>
<div>
<span>b</span>
<span>a</span>
</div>
</body>
</html>
Edit: Based on fiddler
Remove the absolute position from div's in the style sheet.
Don't put white space between the div's this includes newline (as multiple white space will be replaced by a single space but this has size).
<div style="top:10px">
<!-- ^^^^^ No absolute here -->
<div style="display:inline">aaaa</div><div style="display:inline">bbbb</div>
<!-- ^^^^^^ No Space here -->
</div>
See here:
http://jsfiddle.net/sNqpP/ Where I have changed it for the first line aaaabbbb but not for the others.
Your solution:
http://jsfiddle.net/JsZ9q/9/
Add float: left;, replace position: absolute; with position: relative; to make this work, and set margin-left (or left) to 0. You can ignore the clear attributes - I only added that for readability.
Btw, this example screws with the basic reasons CSS was separated from HTML - HTML creates the structure; CSS provides the styling.
At no point should you EVER use the style attribute in your HTML, especially since the divs have a width that is only defined at runtime and you're only running this in CSS (no JS). And finally, avoid absolute positioning as much as possible.
Float does this:
.left {
float:left;
}
.right {
float:left;
}
http://www.w3schools.com/cssref/pr_class_float.asp
Or am I missing something in your question?
If you must use absolute positioning, you need to know the width of the leftmost div. That would involve some JS. Let me know if thats your problem.
use a wrapper for positioning: I Forked your Fiddle
You need to have a parent object with a width in order to float child objects right next to each other: http://jsfiddle.net/alanweibel/6aGbU/
<style type="text/css">
.wrap
{
width:100%;
}
.left
{
float:left;
}
</style>
<div class="wrap">
<div class="left">aaaa</div>
<div class="left">bbbb</div>
</div>
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
This may be the simplest question ever, but try as I might I simply couldn't figure it out. I'm working on a website right now and I wish to use as few <div> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:
<html doctype etc etc>
<head>
<title and meta tags>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear - either use an <img> tag, or set the background-image property on the header <div>. However then I got to thinking about SEO. For Google's sake it would be nice if the header <div> contained an <h1> element with her website's title, but then this element would have to be hidden so that human users only see the background image.
Although if you were to use the display:none; css property then the entire <div> disappears, including the background. Is there a good way to hide the contents of a <div> without hiding the <div> itself?
Have you tried to apply the hide on the H1 itself?
<div id="header">
<h1>Company title</h1>
</div>
Your style would be: #header h1{display:none;visibility:hidden;}
UPDATE
Apparently, we're both just having one of those days. If you want to make the H1 truly SEO/Screen reader friendly, it would be better to do this with your CSS:
#header h1{
width:XXXpx;
hight:XXXpx;
background:url('image/location.png');
text-indent:-9999px;
overflow:hidden;
}
This way your text is actually there on the page and rendered, it's just kind of off screen.
You could replace #header div with h1 if you want this tag, set background image on said h1 and even put some text in it (company name) and use text-indent to hide it.
Plus, in your quest to minimize number of elements you can use body as a wrapper, and if you need full page background just set in on html element.
Set display: none on the H1 tag rather than the div, and use the background image on the div.
I am trying to make something look like following (don't concern color here. my concern here is the shape);
I tried something with following code but didn't succeed!
<html>
<head>
<style type="text/css">
#header{border:3px solid gray;padding:10px;}
#header-left-container{border:1px solid gray;float:left;width:30%;}
#header-right-container{border:1px solid gray;float:right;width:69%;}
</style>
</head>
<body>
<div id="header">
<div id="header-left-container">
pooo
</div>
<div id="header-right-container">
bla bla bla.....
</div>
</div>
</body>
</html>
I know this can be done with table easily but I don't wanna use table in my application where I can do the same with div elements.
any suggestion here?
http://jsfiddle.net/j4DnG/7/
What you need to do is clearing the area arround the 2 floated divs.
Doing this by modern technuiqe is giving the parent the property of Overflow:Hidden or Auto (what ever fitting you more. I recommend hidden)
In the past people user clearfix (google on that). Todays we use that approach.
As well people used to put clear:both after the creation of the two elements. That has a negative side- 1 more element in the dom.
You need to add overflow:auto; to the #header css; without that divisions don't expand to contain floated elements.
your code looks fine...
suggestions:
Just Add clearfix after floating divs so as they will be contained inside the parent object like:
<style>.clarFix{clear:both;}</style>
<div class="clearfix"></div>
Add
<br style="clear:both" />
after second div. Or make the container div float: left. Or use one of the css frameworks if You don't want to become css master before You create a webpage. One is http://960.gs/
Do you use firebug? go on twitter.com and see how they have defined a left and a right container is the style sheet . They're not using table to implement it. just div
Just replace the float: right; declaration with a margin-left: 30%; declaration for #header-right-container. You don't need to float both of them. This way, you will only need to clear floats if the left block is taller than the right block. See this fiddle.