Incredibly simple piece of HTML - but not displaying how I would expect.
I'm trying to create an empty div that displays as whitespace on the top of the page, with style="height: 400px;"
Even though I have specified a height, my empty div will not display. What am I missing here?
UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic style rules needed to display an empty div?
Full code:
<html>
<head><title>Site Name</title>
</head>
<body>
<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>
<div style="width: 50%; margin: auto;">
<img src="logo.gif"></div>
<div style="width: 50%; margin: auto;"></div>
</body>
</html>
If you just want to add white space try this
<div style="height:400px; width:100%; clear:both;"></div>
FIDDLE
or you could just add padding to the body like body { padding-top: 400px; }
The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.
For who looking for a white space (not exactly an empty div) you can add an empty span so the div is no more considered as empty one.
Avoid using because the default font-size can make the div higher than you want.
div{
height:100px;
background:#ff8800;
}
<div><span></span></div>
You need to add a background so you can see the white box.
background-color:black;
You won't be able to see it.
The reason it did not display is because you had position:absolute in your style. That means that div will be positioned independently of the other elements, and have no effect on the div that follows. So your second div is essentially the first div on the screen.
Add some whitespace to your div and it will work.
<div style="height:400px; width:100%"> </div>
Related
I have a very normal div and inside I have some text. the div is styles with test-align:center;and have a fixed width of 360px. The problem is when I try and enter some text without any spaces between words, the whole document would not break and commit to the div's width, it would just get out of the div's width I set it.
I know that in a real life situation no one would write a document without any spaces between words, but I just want to achieve this.
HTML
<div class="wrapper">SomeDummyTextWithNoSpaceInBetwenn</div>
CSS
width:350px;
display: block;
margin: 10px;
text-align: center;
You can style the way text wraps inside a div with CSS using word-wrap:breakword
div{ width:360px; background:#555; color:#eee }
#withWordWrap{ word-wrap:break-word }
<div id="withoutWordWrap">
ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
<br><br>
<div id="withWordWrap">
ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
You can use word-wrap: break-word;
I have a div with 3 columns, each column set to contain a thumbnail image link. I've styled this div - .reading-pane - to have the right margins and borders in order to accommodate my design. There is also an inner div
- row_inner_wrapper - that is created by the theme I'm using. There is no width set for this div - it should just accommodate the three thumbnail divs. However, the .row_inner_wrapper div is wider than the total of the image divs and making my .reading-pane div extend off the right of the page.
I can find no styling that should cause this using Firebug. However, in Chrome I can see that there is a right margin applied when I mouse over this div, even though there are no such styling rules applied. I can even set margin:0px !important on this div and the margin remains. Any suggestions on where my phantom CSS may be coming from?
You can see the page in question here http://jpsingh.samcampsall.co.uk/galleries/
HTML
<div class="reading-pane">
<div class="row_inner_wrapper">
<div class="row_inner">
<div class="themify_builder_sub_row clearfix">
<div class="col3-1">
</div>
<div class="col3-1">
</div>
<div class="col3-1">
</div>
</div>
</div>
</div>
</div>
CSS
.reading-pane{
background-color:#ffffff;
background-image: url('leftcolumn.png');
background-repeat:repeat-y;
margin:30px;
padding:25px 25px 25px 103px;
}
.row_inner_wrapper{
margin:0px 0px 0px 0px !important;
}
Just set the width of the block of code below to auto. 100% stretches it beyond its parent.
.themify_builder_row.fullwidth,
.themify_builder .module_row.fullwidth,
.full_width.sidebar-none .themify_builder .themify_builder_row {
width: auto;
}
in your .reading-pane div you have class
.full_width.sidebar-none .themify_builder .themify_builder_row.
This class have a rule width: 100%;. When I removed this rule the .reading-pane div was positioned properly.
I have a div with absolute position floating on the right side (green).
It is correct that protrudes half
The problem is when the window to the minimum size of 985px page is reduced. Although the div is floating generates side-scrolling, is it possible to avoid this by reducing the window scroll?
<body style="width:100%; min-width: 985px; padding:0px; margin:0px; color:#FFFFFF; background:#160E30; border:2px solid yellow;">
<div style="position:relative; width:985px; margin:0 auto; height:70px; border:2px solid #FFFFFF">
<div style="color:#FFFFFF">TITLE</div>
<div style="position:absolute; top:-10px; right:-15px; width:100px; height:30px; border:2px solid green;">FLOAT</div>
</div>
http://jsfiddle.net/sb8c216s/4/
http://fiddle.jshell.net/sb8c216s/4/show/
It's a small picture by simply design. Half of the image is within the page and the rest outside. When the window is reduced to the minimum width of the body, half of the image is not hidden, shown full generating a small scroll.
If I've understood your problem correctly, the problem is width: 100% on the body tag. Remove this and it will remove the scroll bars.
This happened because you have a border applied. width: 100% will make the element the full size if the parent element (in this case the entire document window). Then border is added which makes the element bigger than the document window.
This is normal behaviour based on the "box model"
http://www.w3schools.com/css/css_boxmodel.asp
The body tag is a block level element which means that it will take up the full width of it's parent element unless told otherwise. The default setting for the width attribute is auto which means it will automatically reduce the width so that the entire element (width/padding/border/margin) will fit without increasing the size of the parent element.
This is due to the extra space taken by the borders. Add box-sizing: border-box; to body css. It will solve your problem.
SOLUTION:
Body tag has overflow:auto property provided
Container element has overflow: hidden
'Left' and 'Right' elements are moved within the 'main' div container
https://wordimpress.com/how-to-position-elements-to-the-negative-right-position-and-prevent-horizontal-scrollbars/
Look at this example
The html does not respect min-width as long as we have float:right in the CSS rules
.right {
float:right;
background:blue;
min-width:400px;
}
If removing the float:right or changing it to float:left, then the html element will not be narrower than the min-width.
How we can use min-width for an element floated right?
Screenshot: As commented by some fellas, this is what I see on the latest version of Chromium on Debian.
As you can see the left side of the div including its content is invisible (in other words, outside the visible part).
The right-floated div is doing just what it is told to in the original example: it is remaining at least 400px wide. If the viewport is reduced to less than 400px, part of the div is obscured, because it's not allowed to get any narrower than 400px. So the question is, what behavior do you really want here? Perhaps what you really want here is a non-floated wrapper element that has a min-width of 400px?
EDIT: Here's an example of how a non-floated wrapper will make it work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body {
background:red;
margin: 0;
padding: 0;
}
.wrap {
background:#e7e7e7;
min-height: 600px;
min-width: 400px;
}
.right {
float:right;
background:blue;
min-width:400px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="right">
TEST
</div>
</div>
</body>
</html>
The wrapper could of course be colored red. I just made it gray so it was easy to see.
div is a block level element, by default it will take up 100% space..
Alternatively if you want to see only 400px element instead of 100% width you can use display: inline-block, or specify a fixed width to it.
Demo
Note: If you don't want to use display: inline-block; you can just keep it the way it is, if you minimize the window, you'll see a horizontal scroll bar so if you think that using min-width will only show element with a width of 400 px than you are wrong, it is min and not max
I found that if I put an overflow-auto div that contains other divs the width of those sub-divs is just the width of the visible part of the parent and not the width of the scrollable area.
You can see an example at http://jsfiddle.net/UdgCE/
Is there a way to specify as width the full width of the scrollable area instead?
I am not sure if this is ideal and it probably doesn't quite answer or match what you are intending to do.
However it appears as though the containers inside of the scrollable container exhibit similar behavior comparable to how a container would stretch a window. For example if you had a div with height:100%; and width:100%; it would stretch the view port and nothing more.
With that in mind, after messing around for a while, the only pure CSS solution I have found is to set specific "matching" pixel values to your inner / outer containers.
An example here ... http://jsfiddle.net/krishollenbeck/UdgCE/27/
HTML
<html>
<body>
<div style="overflow:auto" id="container">
<div id="inner-wrap">
<div style="white-space:pre" id="content">
This is a the text of the first div and it's veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long
</div>
</div>
<div style="background-color:#FFFF00" id="yellow">
</div>
</div>
</body>
</html>
CSS
#yellow {
width:2000px;
}
#container {
border:1px solid red;
width:400px;
}
#content {
width:2000px;
border:1px solid #333;
}
#inner-wrap {
width:2000px;
}
This hardly seems ideal but it seems to work. I am guessing you will most likely have to use javaScript to measure the width of the scrollable container and then match the inner divs to that dimension.
Adding a "clearfix" to the wrapper div fixed it for me.
This makes the wrapping div expand to the width of the text. Not just overflowing.
http://jsfiddle.net/7a67j/