I would like to have a border bottom that is overrule the container width to the right. So I have two colomns of six col-md-6. The right one has an article as a child. That article has a border-bottom of one px. That should reach the window viewports right. See image bellow:
As you can see, the right vertical line wil show the container end. There should stop the content and let text for example position on a new line. But the border should overrule that so it will reach the viewport right.
Oh and I make use of bootstrap grid if that was not clear!
Code in progress:
http://codepen.io/anon/pen/gaewLB
Borders can't extend beyond their element.
BUT you can use a pseudo-element instead; like so.
.page header,
.page article {
padding: 60px 30px;
/*border-bottom: 1px solid #c2c2c2; */
position: relative; /* positioning context */
}
body {
overflow-x: hidden; /* prevent scrollbars */
}
.page header::after,
.page article::after {
content: '';
position: absolute;
top:100%;
left: 0;
height: 1px;
background: #c2c2c2;
width: 100vw; /* or some other large px/em value */
}
Codepen Demo
Related
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
Look at my html + css code: http://jsfiddle.net/nP39E/1/
I'll explain if don't understand what I want to achieve:
I want a page with a div which floating right and takes 250px width and a div that takes width of the rest of the document.
In the left div, you can see that I have some other floating elements, and their heights are effected from the right div. You can see the first (red) row with height that align with the right bar's height and has nothing to do with the real content of its content.
I use group class in order to handle the common floating problem: .group:after { content: ""; display: table; clear: both; }
Can you tell me why it happens?
I just changed CSS for the content div from the last answer:
.content {
background: #888;
padding: 10px;
position: absolute;
right: 270px;
left: 0;
}
http://jsfiddle.net/nP39E/4/
What you think?
display: table isn't meant to be used for layouts like this, it's more useful for specific equal-height situations.
Properly floating the divs and not using the margin-right to push the left div will work:
.content {
background: #888;
padding: 10px;
float: left;
width: 250px;
}
Fiddle
You are giving margin-right:270px which is wider than the available space,So just remove that. Also you should make content float:left.
.content {
background: #888;
padding: 10px;
float:left;
}
JSFiddle : http://jsfiddle.net/ankur1990/nP39E/3/
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
I am using the sticky footer method for Bootstrap 3.0 as described in their example. I have it working fine and that is not what I am struggling with.
It calls for the wrapper to have the following:
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
Now I am trying to have some 100% height containers inside that and I can't because there is a height of auto on the parent. Is there a way to get around this and keep my sticky footer? I want to put 100% height containers that stretch so I can put backgrounds in them.
Thanks
I'm not quite sure if this solution fits your needs, but it involves absolute positioning a div behind the sidebar and making it stretch the height of #wrap by setting top and bottom to 0. It essentially inherits the height while avoiding explicitly declaring a height property. The only potential problem would be if you have other elements that are above the sidebar (i.e. headers) since the div will also be stretch behind those as well.
http://jsfiddle.net/qaB8D/
#wrap {
position: relative;
}
aside, #words {
/* This is just so the sidebar stays left, and the text stays right */
display: table-cell;
}
aside {
width: 100px;
}
aside:before {
content: '';
position: absolute;
background-color: red;
top:0;
bottom: 0;
width: inherit;
z-index: -10;
}
/* include Sticky Footer code/*
I have a div(InnerDiv) which contains a grid with paging enabled...
After some user actions , data inside that grid will load and we will have a big grid!
The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.
my css of body and html like below :
html, body
{
margin: 0; /* get rid of default spacing on the edges */
padding: 0; /* get rid of default spacing on the edges */
border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
height: 100%; /* fill the height of the browser */
border:3px solid red;
}
i need 100% height of body when page loads...
OuterDiv inside body like below :
div#OuterDiv
{
position:absolute;
width: 100%;
height: 100%;
/*height: auto;*/
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:5px solid green;
}
InnerDiv Inside OuterDiv Is Like Below :
div#InnerDiv
{
position: relative;
width: 100px;
height: 100%;
margin: 0 auto;
background: transparent url('../Images/Blue.png') repeat scroll left top;
}
Content Inside InnerDiv Like Below :
#Content
{
position: relative;
top: 10px;
background: transparent url('../Images/Red.png') repeat scroll left top;
width: 550px;
height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
top: 10px;
right: 10px;
padding: 7px;
border: 10px ridge #ce004e;
color: black;
}
that grid(Content) is inside InnerDiv...
EDIT 1
the below example can show my situation :
Here's an example at jsFiddle
we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!
i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...
i know this problem is about 100% height / but how can i fix that ?
EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?
thanks in advance
You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.
Try changing your div#OuterDiv rule like this:
div#OuterDiv
{
position:absolute;
margin: 0px;
padding: 0px;
border: 5px solid green;
}
Here's an example at jsFiddle
From what I could gather from your explanation and styles you basically want this:
http://jsfiddle.net/sg3s/zXSXx/
If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.
By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.