Okay this page
http://www.cg-hq.com/?s=test
you will see my test board that the border line is not all the way down. I adjusted for height certain size but if content is not that long it does not go down all the way
http://www.cg-hq.com/
Here you will see it is fine as i added width 600px. But if you go to first link it is broken cause it is longer.
Please help me as i am going crazy. I tried to set height to 100 percent and also set min height. I put it back to original for someone to help.
The page that is correct only has a div#r_sidebar on the right. The test page has both the div#l_sidebar and div#r_sidebar stacked below. You'll need to sync up some of the #l_sidebar styles to match #r_sidebar if you want these to stack and look like one div.
In your styles.css file on line 257 add this:
#l_sidebar {
border-left: 1px solid #E2DDDE;
border-right: 1px solid #E2DDDE;
float: right;
font: 11px/18px Verdana,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0 19px 20px;
width: 294px;
}
Related
I've been struggling with this issue. I have a web where I want to put certain fixed positioned element (kind of alert box for users). Therefore I decided to position it as fixed and put in the bottom left corner of the web. I assumed that it does not matter where I put the piece of HTML code as it will be positioned anyway, so i put it right under opening body tag. Everything went well, box ended up where I wanted it to be, BUT it leaves a strip of blank space at the top of the web (where the HTML code is). Isn't positioned element supposed to take up no space? My logic seems to be wrong.
Image of the problem.
Box HTML:
<div class="users-alert-box">
Some Text
</div>
CSS:
.users-alert-box {
background: #fffcd2 none repeat scroll 0 0;
border-radius: 5px;
bottom: 35px;
box-shadow: 1px 1px 5px #888;
display: block;
font-size: 12px;
left: 30px;
padding: 10px 15px;
position: fixed;
z-index: 1000;
width:170px;
}
What am I missing?
Thanks!
The code you have provided do not create a top space. Check the fiddle.
https://jsfiddle.net/tpoj91u4/
The spacing will be due to the margin of any other element.
Turned out to be PHP related error. Thanks to everyone for your time!
I have two separate forms. However, the second form is overlapping the first, instead of being beneath. I can confirm it is a CSS issue, however I cannot work out what it is - it has had me puzzled for ages, and now I'm finally giving up.
Here is the code: http://codepen.io/anon/pen/bNPgbW
.comments-section .comment-form {
padding: 20px;
background: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
}
Thank you for your time :)
It's because your .company-profile class is being restricted to 200px tall. Your first form doesn't fit into that height and overflows that container but it won't push down the next form because you told it to only be 200px tall. Remove that height and it will fix the issue.
I have a layout that has a side menu bar and then the main content displayed on the right side. The layout and functionality work just fine except for one minor detail -
In some cases, there isnt enough content to fill the entire screen and when that happens the DIV containing the main content does not stretch and fill the remainder of the screen creating a visual difference as seen in the screenshot. I tried manipulating various attributes and putting in dummy content etc but could not find a clean solution. I am hoping someone can help. I am using Twitter Bootstrap 3.x
I have included the CSS for the main section, ideally, I would like this white background to fill the screen upto the footer.
/*
* Main content
*/
.main {
padding: 20px;
background-color: #fff;
border-left: 1px solid #dae3e9;
height: 100%;
box-shadow: -3px 3px 3px -2px #f1f1f3;
}
I have also created a fiddle with my code, the visual is a little messed up because the output is trapped inside a frame - but here it is anyway -
Dont use min-width: 100%; on your #wrap.
Basically solves the problem.
But i want the footer to still be at bottom etc...
Fiddle
Added:
.main::before {
content: "";
position: absolute;
z-index:-1;
display: block;
width: 100%;
margin-left: -20px;
height: 100vh;
border: 1px solid black;
background-color:white;
}
Suggestion: clean up your code. you don't need that much html code the design your doing. I't will be hell for any one who want to edit or change it at a later stage.
I have text and want to give the text a left and right border which vertically extends over the entire webpage. This is my html
<div id="vLine">
<h1>text</h1>
</div>
and this is my css
#vLine {
height: 100%;
width: 50px;
border-left: 3px solid black;
border-right: 3px solid black;
Now, even though I set my height to 100%, it still like a tiny 2px gap between the top of the line and the top of the webpage, it stretch over the entire page and connect till the top of the page. Why is this gap there? I am using the chromium browser, and i'm guessing this gap will vary depending on browsers but how do I get rid of this gap completely regardless of the browser?
Hm okay so what I tried way,
#vLine {
margin: -10px;
}
and it worked, turns out that gap which looked like just 2px was 10px but yea, it fixed it.
I am making a Tumblr theme and I'm having to get creative to make my pages look the way I want them too.
One issue I'm running into is that I want a green border and a max width of 150 on any images on individual pages, but the template for individual pages is used for text posts on the index page, so my index page images are being set to have borders and a max width of 150px, which is not right.
Luckily there is a code on tumblr that lets me execute certain code of someone is looking at the index page. So is there any way I can make a second div that negates the border and size rules in the first div? Here is my code:
.text img{ //for individual pages
max-width:150px;
padding: 3px;
margin: 0 5px 3px 0;
border: 3px solid #52B472;
}
.notpage img{ //for index page
max-width: 500px;
border: none;
margin: 0px;
padding: 0px;
}
HTML:
<div class="text">
<div class="notpage">
In a perfect world, there would be no borders or max width on images in this div.
</div>
</div>
Sadly, the CSS from the 'text' div carries into the 'notpage' div. So does anyone know of any way I can negate the first div's CSS in the nested div?
Try changing
.notpage img{ //for index page
to
.text .notpage img{ //for index page
If that doesn't work, try this:
max-width: 500px !important;
border: none !important;
It's not very good practice, though.