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.
Related
JSFiddle available here.
I am writing an HTML page with nothing else in its body than a simple div.
Without CSS, the div has 100% of window width and about 20% of window height (actually max body height), and is stuck to the window borders. I want it to be centered horizontally and a bit detached vertically, so I applied 100% width and 100% height to html and body tags, and I also applied auto left and right margins to the actual div, + 125px top margin.
html, body {
width: 100%;
height: 100%;
}
#div {
margin-left: auto;
margin-right: auto;
margin-top: 125px;
}
The problem now is that the page can be scrolled. When highlighting the borders of the elements in the page, you can see that the body element has moved with the div 125px downwards, thus allowing a 125px scrolling. The div is still stuck to the top border of the body, but 125px away from the top border of the window.
To fix the problem, I had to add position: fixed; to the body rules. Then, the body was stuck to the window borders, and the div was 125px away from the top border of the body.
But still, why do positionning a div inside of the body also repositions the whole body ?
EDIT: The div id is #prompt in the provided JSFiddle.
2ND EDIT: The original question actually was :
Why do I get this instead of getting this ? (links are pictures)
WHY is the BODY block actually MOVED by a DIV CSS rule ?
The answer maybe that I'm using Bootstrap and it doesn't like that I override rules for html and body tags.
See the marked answer just below.
TL;DR, you may use !important declarations in CSS to properly override body and html rules.
Your current styling creates a height of 100% for the html tag + 125px for the margin, which creates an vertical scroll overflow. This is because you set your html tag css to height: 100%;, once removing that line from your css, the positioning of the div no longer affects the scrolling of the page, which is what you want.
http://jsfiddle.net/dmaymo3m/1/
Edited Answer:
I added a bootstrap container and some CSS to the html and body elements and this seemed to work.
Fiddle here: http://jsfiddle.net/tzhben/byye4eop/1/
CSS:
body {
background-color: #EDF;
}
html, body {
height: 100% !important;
}
HTML:
<body>
<div class="container">
<div id="prompt">
<p class="well">Please login to continue.</p>
<form action="index.php" method="post">
<div id="pwd-box" class="input-group">
<input type="text" class="form-control" placeholder="Password">
</div>
</form>
</div>
</div><!-- /.container -->
</body>
Hope this helps!
I have two divs:
<div id="headercontainer" data-type="background" data-speed="5">
<div id="headersubcontainer">
<h1>Simple and Cost Effective Web Solutions</h1>
</div>
</div>
<div id="teamcontainer" data-type="background" data-speed="5">
<div id="teamsubcontainer">
<h1>Developed by a dedicated team</h1>
</div>
</div>
both have 100% widths and heights of 800px. The first heading I have set a top-margin: of 160px. Instead of moving the header lower into its parent div, it moves the parent div down with it as you can see in this picture:
Here is my relevant css:
h1{
font-size: 48px;
font-family: $header-font-stack;
font-weight: 100;
width: 400px;
}
#headercontainer{
width: 100%;
height: 800px;
background-image: image-url("background.jpg");
background-position: center top;
background-repeat: no-repeat;
}
#headercontainer h1{
text-align: center;
margin: 0px auto;
margin-top: 160px;
color: #610B21;
}
Using a padding works obviously, but I would like to be more proper and use a margin. How can set a top margin and move the heading lower into the container without moving the container with it?
This is due to margin collapsing:
Top and bottom margins of blocks are sometimes combined (collapsed)
into a single margin whose size is the largest of the margins combined
into it, a behavior known as margin collapsing.
This is resulting in the parent element reverse-inheriting the child element top margin.
You can prevent this by adding before the child element
Demo Fiddle
....or applying any of the below to the parent:
float: left / right
position: absolute
display: inline-block
Adding display:inline-block; to the parent likely being the preference if it is set to have a width to 100%
Demo Fiddle
just use box-sizing: border-box; on the parent and set the padding there instead of margin-top. It will help you keep consistent spacing on all sides anyways
JSFIDDLE
Just add some top-padding to the parent element. even 1px and it will fix it.
I would actually argue that this answer is better:
https://stackoverflow.com/a/49075574/2387316
Yes, I know it's my own answer, but I think it's important that we don't add random bits of padding, change box-sizing for no reason, add spurious elements to the DOM, or change display/padding simply to fix a display issue. Those solutions all cause problems on their own: SEO is worse, unpredictable box-sizing behavior when trying to do something else, annoyance caused by positioning and display changes, etc. This solution is good for SEO, is scalable, and has no other tangible effect when trying to do other things with your elements.
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>
I was working on this CSS, I have wrapped an article inside a div. I have given percentage width for both, and padding for the div. My padding seem "not applied" until I add border to the article. You can see the difference by commenting the border applied to the article. My article height shrink. Why is this happening?
<style>
body{
margin:100px;
}
.content{
width:100%;
padding:.9746589%;
background:green;
}
.content>article{
width:100%;
background:yellow;
border:1px solid red;
}
</style>
<div class="content" role="main">
<article>
<p>This is my text!</p>
</article>
</div>
There are default margins in your p element that are collapsing with your article element. When you add a border to your article, it prevents that collapse from happening and causes it to contain the p element and its default margins.
Your .9746589% padding is applied in both situations, but since you put it on .content it isn't actually affected by the margin collapse between its article and the p that's inside it. If you were to remove that as well as the border, though, then the margins would collapse across all elements and the green background would completely disappear. In other words, just like how your border is blocking margin collapse between article and p, your padding is also blocking margin collapse between .content and article and its contents.
Lastly, margins only collapse vertically, so setting width will never make a difference.
I was wondering how I can center this http://prntscr.com/hv2q7 It is hanging off and I want it to be centered like this http://prntscr.com/hv2ue so that the gray part is coming into the border. Here is the css code and html for it :
The css:
#banner{
height: 279px;
width: 998px;
margin-right: 0px;
margin-left: 0px;
background-image:
url(/template/default/images/layout/background/newlayout/test.png);
}
The html :
<div id="banner" ></div>
You want to set your left and right margins to auto, not 0px.
Try this, it's the shorthand for setting your top/bottom margin to 0 and your left/right to auto:
#banner {
margin:0 auto;
}
Centering with css normally revolves around the use of margin:auto;
In this case you're looking at left and right margins being auto, so something like margin:0 auto; As you try it out for your full page specifically you may find you have to set the elements' display to block or the float or even a position, depending on the browser. Though those are usually not necessary.
Also, if the div really only contains the background image, you might set the background-repeat to none and the background-position to center. That would only center in the div, so if the div is actually showing as the width and height of the image, it wouldn't change anything, but if the div is filling the width of it's containing block, then you'd get left and right centering.
put this arround your banner code:
<div align="center"> "your banner code" </div>