I'd like to create a div that has the same width as the text's length inside it.
I can do it without problem when the div is inside a DOM element that has enough width to fit the text in.
But when I put my text holder div inside another div that is not wide enough the text will be fractioned into lines even if I set the text holder div's max height and the container div's overflow to visible.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body{
background: #c0c0c0;
}
#wrapper{
margin: auto;
width: 200px;
height: 300px;
border: 1px solid yellow;
overflow: visible;
}
.text{
display: inline;
min-width: 200px;
max-height: 19px;
line-height: 19px;
font-size: 19px;
background: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
</div>
<div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
</body>
</html>
Here's a picture of that:
http://i36.tinypic.com/331ix53.png
I'd like the text inside the "wrapper" DOM element to be in ONE line like the text outside it (and of course to be overflowed)
You can do this by adding the CSS white-space property to your .text class:
.text{
white-space: nowrap;
/* other css declarations */
}
In action here.
Related
My centered header bottom margin is overflowing the parent container, causing a gap between yellow and orange wrappers:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.header-wrap{
background-color:yellow;
}
.content-wrap{
background-color:orange;
}
.header{
margin:0 auto 1em auto;
background-color: red;
width:40em;
}
</style>
</head>
<body>
<div class="header-wrap">
<div class="header">header</div>
</div>
<div class="content-wrap">
<div class="content">content</div>
</div>
</body>
</html>
If I use a simple clearfix for parent .header-wrap{overflow:hidden;} the problem is fixed, but I don't understand why I need to use a clearfix here, since I'm not using floating elements at all.
From what I know, the clearfix is applied on the parent to clear any floated children inside, which is not the case here.
Can anyone explain why is this happening?
.header{
margin:0 auto 1em auto; //margin 1em at bottom
background-color: red;
width:40em;
}
change it to
.header{
margin:0 auto;
background-color: red;
width:40em;
}
DEMO
Add float:left or inline-block to your header. Currently in your structure you mentioned the margin-bottom to header div which is inside the header-wrap class. header is the child element. To display yellow background, you must need to wrap the child element.
DEMO
CSS
.header-wrap {
background-color: #FFFF00;
display: inline-block;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#content {
margin-top: 100px;
margin-bottom: 100px;
}
.left { float: left; }
.middle { margin-left:511px; float: none; }
.right { float: right; width: 115px; }
#footer {
margin-top: 300px;
margin-bottom:11px;
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>css test</title>
</head>
<body>
<div class="top">I have a dream</div>
<div id="content">
<div class="left">I am left</div>
<div class="middle">I am middle</div>
<div class="right">I am right</div>
</div>
<div id="footer"> I am in the footer</div>
</body>
</html>
Above is my html source code.
It displayed in the browser like below.
My question is why "I am right" is below of "I am middle". I think they should have the same height. How can I improve my css style. Thanks.
Here is the your corrected Fiddle link. Following is your corrected CSS
.middle { margin-left:511px; float: left; }
#footer {
margin-top: 300px;
margin-bottom:11px;
padding:15px 15px 15px 0;
}
Add float: left; to your .middle class instead of float:none;
div is a block element and i.e. its takes the full width, for making it to work as you mentioned add float:left; to the middle class.
Output -
Try using display: inline-block to your class="left, middle, right".
Problems With float
The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it.
Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt.
To learn more about inline-block refer Robert's Page.
JSFiddle for reference.
I want the background image of one of my divs to overflow into the body section. I've tried overflow:visible without any luck.
Check the pic:
See how the gold bits get cut off on the edge of the div? Suggestions please?
Here's my set up:
in the HTML:
<body>
<div id="container">
in the CSS:
body{
background-color: #0e0a04;
}
#container{
max-width: 960px;
margin: 0px auto;
padding: 0px;
margin-top:60px;
background-color: #0e0a04;
background-image: url(/bundles/tabredirector/images/background-image.png);
background-repeat:no-repeat;
background-position: -70px -20px; /*x,y*/
overflow:visible;
}
Thanks!
WHAT I ENDED UP IMPLEMENTING:
Thanks for all of your suggestions, they inspired my solution. My final solution was to use a master div (position:relative with z-index:-1) and my container (position:absolute z-index:1) and stick an image in the master div that can be positioned absolutely. This way the content always sits on top and the background isn't clipped.
first post your markup and css. Also give the div a width:100%.
You need to make sure there is a div outside your containing div. You can have a container above and below it which will hold all your other content.
Then you need to have a 100% width div with the full bg image centered.
Then within that div add another div for your content which can be 960 wide with an auto left and right margin to center it to the page.
Paste your HTML in your post as well the css is not enough as you need to add to your html!
Thanks
Background images on an element only appear within that element.
If you want your <div>’s background image to appear outside the boundaries of the <div>, you need to assign the background image to another element instead, e.g. the <body> element.
Heres a quick example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#fullWidthImage {
background-color: #0F9;
height: 200px;
width: 100%;
}
#centeredContent {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 200px;
background-color: #09C;
}
</style>
</head>
<body>
<div class="container">
<p> </p>
<p>top site content </p>
<p> </p>
</div><!--container-->
<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->
<div class="container">
<p> </p>
<p> </p>
<p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>
So I am experimenting with pure css layouts, and immediately I have become stuck. I have the following html and css:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout</title>
<link type="text/css" href="site.css" rel="stylesheet" >
</head>
<body>
<div id="header">
My Site
<div id="search-area">
<form>
<input type="text" id="search-box" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<div id="sidebar">
Account Name <br>
Edit My Account
</div>
</body>
</html>
#header {
background-color: #151B54;
height: 30px;
width: 100%;
}
#logo {
position: relative;
left: 10px;
color: white;
font-size: x-large;
font-weight: bold;
text-decoration: none;
float: left;
margin-top: 3px;
}
#search-area {
position: absolute;
left: 200px;
margin-top: 3px;
}
#sidebar {
float: left;
width: 100px;
border-right: double;
}
When I view this in Chrome I get the rendering that I was expecting:
However, in IE I get the following:
Notice how there is a massive blank area to the left of the sidebar. Why is that showing in IE?
I get the same problem in Safari and for the same reason: you're not clearing your floats in #header and #header isn't quite tall enough to contain all of its floated children.
If you increase the height of the header to 31px, you should (but maybe not) get the desired layout. A better approach is you add overflow: hidden as a clear fix, that will make all of the children of #header fully contained with #header and that will stop them from interfering with the layout of the next piece:
#header {
background-color: #151B54;
height: 30px;
width: 100%;
overflow: hidden;
}
Live example: http://jsfiddle.net/ambiguous/EUmyN/
A rule of thumb with floated elements is to always make sure they're cleared either with overflow: hidden on their container or, if necessary, with an explicit <div style="clear: both;"></div> at the bottom of the container.
Also, while we're here, you rarely need width: 100% on a block element such as a <div>. If you're positioning it or floating then maybe you'll need something like that but not for a plain <div>; block elements are full width by default.
Try clearing your online cache. Oftentimes the css file is cached and using an older version causing this type of behavior.
May not be the problem, but the first action you should take when trying to troubleshoot unexpected results on style.
I am trying to get an image to stretch out a div element in my new Tumblr blog theme.
Currently my photo div is sizing to the full width of its parent container. The problem I have is that I also have a captions div below the photo and if the photo is not the full width of its containing div I dont want the captions to spill past the edges of the photo.
The Problem !
This is what I am after:
alt text http://dl.getdropbox.com/u/973862/problem.jpg
Here is a drawing !
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Brant Winter">
<!-- Date: 2009-04-26 -->
</head>
<style type="text/css">
.container {
width: 520px;
margin-left: auto;
margin-right: auto;
}
.photo {
border: solid 1px #ccc;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<div class="container">
<div class="photo">
<img src="http://8.media.tumblr.com/mFYIJY2I7mpit79h73TC9xa7o1_400.jpg">
<div class="caption">Sausage dog airtime</div>
</div>
</div>
</body>
</html>
And this is what it looks like in my browser:
alt text http://dl.getdropbox.com/u/973862/Picture%202.png
This is what it looks like
The container div should be centered, the image should be centered within that and the caption text should not be allowed to go past the edges of the photo ( if there was enough text to do so )
Not sure if I am making any sense, but any help would be appreciated - I have spent hours on this today !!!
You mean like centering the photo?
.photo {
border:1px solid #CCCCCC;
margin-left:auto;
margin-right:auto;
text-align:center; <---
}
I think the easiest solution would just to be to fix the width of the container. Why is it 520px?
If it has to be 520px, though, then just center the stuff in the container and add auto-margins for the caption:
<style type="text/css">
.container {
width: 520px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.photo {
border: solid 1px #ccc;
margin-left: auto;
margin-right: auto;
}
.caption {
max-width: 333px;
margin-left: auto;
margin-right: auto;
}
</style>
The max-width property, in particular, will prevent the caption from spilling past the edges of the photo.
If you don't mind using jQuery to resize it, you could try something like this:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".container").css("width", $(".photo img").css("width"));
});
</script>
That finds the width of the image inside the div (note the space between ".photo" and "img") with class "photo" and applies that width to the div with class "container". Just to be safe, you'll probably want to use IDs if possible, but this will work as long as the class names are unique.