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.
Related
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'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?
I have a div that has a variable width, depending on its content. I want to use it for a menu bar that slides in from the side of the page when the user clicks it, so it has to stick out. I want it to stick out exactly 16px (because the arrow image has that size), no matter how wide it actually is.
How can I realize that without using JavaScript?
EDIT:
Thanks for your answers! But it came to my mind that I could do it just like I did with the navbar on that site – modify the width instead of sliding it in.
See here: http://dev.mezgrman.de/tagwall/
The easiest way to do that is to add another class to your menu item when it is collapsed and set another width there and a text indent like so (instead of write again all your css in a new class)
.collapsed {
width: 16px;
text-indent: -9999px;
background: url("/images/arrow_left.png") no-repeat scroll right center rgba(0, 0, 0, 0.85);
}
Now the only thing you have to do in javascript is to add and remove that class depending on the user's click. (You won't get rid of javascript. because css doesn't know when you click an element)
http://jsfiddle.net/LruWn/
No matter how long the .box is, it will always overlap the .container only by exactly 16px:
html:
<div class="container"><div class="box">text</div></div>
css:
.container {
position: relative;
outline: 1px solid red;
width: 100px;
height: 100px;
}
.box {
width: 70px;
position: absolute;
left: 100%;
margin-left: -16px;
outline: 1px solid black;
}
Add overflow: hidden; to .container to see how it might look like in action.
I solved my problem by modifying the width of my element now. Silly me.
Here is my site
Currently still fiddling around with design layout and there is one problem I can't quite solve.
On my header I have a red border-bottom to separate it from the main content. Likewise, on the footer I have a red top-border to do the same. Is there a way of extending the borders beyond the div (and consequently outside of the wrapper, with overflow visible) without it conflicting with the other elements? I want to configure the layout so it has more of a grid-like design.
#wrap {
width: 1000px;
background-color: #ffffff;
text-align:left;
margin: 0 auto 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000; }
#head{
background-color: #ffffff;
width: 1000px;
height: 159px;
border-bottom: 1px solid #ff0000; }
kind of like this?
Yes. You can set a negative margin, causing the div to extend outside of its parent, like this. (I only did the header, but you get the idea)
The solution in the fiddle uses the annoying !important to get the styling right - you might want to reorganize your CSS to get around this and make your code more maintainable, see this post.
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;
}