I'm trying to build a 'table' with CSS but I'm having trouble getting some of the <DIV>s to fill the width of the layout if the content is too short.
It's difficult to explain in words so here's a fiddle:
https://jsfiddle.net/fatmonk/r2sodp7p/
Basically I don't want to see the pink bit in the example - I want the light blue box to expand to fill the width regardless of how much or how little content is in it.
Using display: table-row does the right thing with regards filling the line, but doesn't allow a border to be set.
(The fiddle isn't the whole page - there are more 'rows' to add and the whole 'table' will be repeated with link sand link code and other bits and pieces.)
It's quote possible that in the process of trying to get this working I've over-complicated the HTML as well - I've ended up adding container <DIV>s to try to force the width, so it may be that the HTML needs trimming down as well, but I've run out of ideas.
Remove width:auto from the inline style tag of all .menuContentInPopup and add width: 100% to it in your css, so
<div id="poster2" class="menuContentInPopup" style="width: auto;">
would become
<div id="poster2" class="menuContentInPopup">
And the css:
.menuContentInPopup{
display: table;
height:auto;
border: 1px solid rgba(99,99,99,.75);
border-top: none;
background-color:rgba(235,245,255,1);
padding:5px;
font-size: 10pt;
text-align: justify;
left: 0px;
right: 0px;
float: none;
width: 100%;
}
Here a fiddle showing the result: Fiddle.
I have also adjusted the box-sizing of all elements so that adding padding to the elements does not make it overflow its parent when width is 100%, this is achieved by
* {
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
}
i might understood it wrong but here is how i would fix it.
[Fiddle][1]
I changed the width to 100% so it will fill your full div. Also removed the width: auto in the HTML.
[1]: https://jsfiddle.net/r2sodp7p/10/
FYI, another clean solution for your case here:
[http://jsfiddle.net/giaumn/f99ub6ro/]
You just need to care about 2 properties:
overflow: auto;
on .menu-content and
float: left;
on .poster-thumb
set your width:auto; to width:100%; and add width:100%; to menuContentInPopup class. remove width:auto from html inline styles.
fiddle
Related
I was trying to make a border glued to the sides of the screen how represents the picture below :
Picture of how i want
I have html code, but i don´t know if i´m doing in the best way. Can you guys help me?
DIV Rectangle HTMl
<div class="content">
This is a rectangle!
</div
DIV Rectangle CSS:
.content {
width:100%;
min-height: 150%;
border:1px solid #FFFF;
border-width: 100%;
background-color: #FFFF;
border-radius: 5px;
padding-bottom: 50%;
}
It is like this:
Picture of how it is
I want to remove this spacing between border and screen, is it possible to do that?
There are 2 solutions:
You can remove your parent block paddings (set it to 0)
You can wrap your .content with an additional block and set its margins to negative values (adjust numbers to fit your layout):
.wrapper { margin: 0 -5px; }
Divs are block-level elements and will take the full width that is available. So, the issue isn't actually the .content div. It's likely that the body has a margin still set on it. It will probably take care of it if you add:
body { margin: 0; }
This is just a guess that it's on the body, but really it's whatever parent or ancestor has margin or padding.
Same problem here
*,html {
margin:0;
padding:0;
}
Hope this helps, "*" will set the whole page to 0
I have an html input.
The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).
However using width: 100%; causes the input to be 100% + 20px how can I get around this?
Example
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.
This is why we have box-sizing in CSS.
I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/
All I added was this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.
Use padding in percentages too and remove from the width:
padding: 5%;
width: 90%;
You can do it without using box-sizing and not clear solutions like width~=99%.
Demo on jsFiddle:
Keep input's padding and border
Add to input negative horizontal margin = border-width + horizontal padding
Add to input's wrapper horizontal padding equal to margin from previous step
HTML markup:
<div class="input_wrap">
<input type="text" />
</div>
CSS:
div {
padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
Use css calc()
Super simple and awesome.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
As seen here: Div width 100% minus fixed amount of pixels
By webvitaly (https://stackoverflow.com/users/713523/webvitaly)
Original source: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/
Just copied this over here, because I almost missed it in the other thread.
Assuming i'm in a container with 15px padding, this is what i always use for the inner part:
width:auto;
right:15px;
left:15px;
That will stretch the inner part to whatever width it should be less the 15px either side.
Here is the recommendation from codeontrack.com, which has good solution examples:
Instead of setting the width of the div to 100%, set it to auto, and be sure, that the <div> is set to display: block (default for <div>).
You can try some positioning tricks. You can put the input in a div with position: relative and a fixed height, then on the input have position: absolute; left: 0; right: 0;, and any padding you like.
Live example
Move the input box' padding to a wrapper element.
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
See example here: http://jsfiddle.net/L7wYD/1/
Maybe browsers have changed since this question was last answered, but this is the only thing that has ever worked reliably for me to accomplish this:
width: auto;
left: 0;
right: 0;
Then you can make the margins / padding anything you want and the element will not expand past its available width.
This is similar to #andology's answer from way back but if you make left/right both 0 then you can make margin and/or padding whatever you want. So this is always my default div.
Just understand the difference between width:auto; and width:100%;
Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding.
Width 100% expands the width and adds the padding.
What about wrapping it in a container. Container shoud have style like:
{
width:100%;
border: 10px solid transparent;
}
Try this:
width: 100%;
box-sizing: border-box;
For me, using margin:15px;padding:10px 0 15px 23px;width:100%, the result was this:
The solution for me was to use width:auto instead of width:100%. My new code was:
margin:15px;padding:10px 0 15px 23px;width:auto. Then the element aligned properly:
You can do this:
width: auto;
padding: 20px;
I want a div to go across the page width no matter the size of one's screen. The problem I'm having is that although the width is 100%, when I view the page it requires scrolling horizontally. I've looked up solutions and tried the suggestions regarding the body element, but I still have this issue. Here are my body and div elements:
body{
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
}
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
To be clear this is not homework, I'm doing this for a personal project.
Yes, it is 100% width, but the browser also adds 1em of padding to it, so it's now 100% + 1em. You didn't set the box-sizing property and it's content-box by default.
If you want your layout to behave more naturally, add this to your code:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Check it here: https://jsfiddle.net/avyxhfcp/
BTW: there is no "float: center;"
You can hide the horizontal overflow using overflow-x. You could also use overflow:hidden, but the code below specifically targets horizontal scroll bar.
body {
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
overflow-x:hidden; /* hide the horizontal overflow */
}
The solution cosmonot provided is incorrect and will only cause you problems when your div's content stretches off-screen and you can no longer troubleshoot when there are overflow problems because you won't be able to see a scrollbar horizontally.
The real problem is that your div is using width: 100% to occupy the entire horizontal space available, it is then adding on the padding you specified as extra, this results in the overall width being over 100% which breaks out the body element giving overflow and thus making it horizontally scroll able.
The solution is not to alter your body's overflow property, the solution is to apply box-sizing: border-box; to your control panel div. This will make the width you specify include the padding and margin's you specify.
Example
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
In future try not to play around with the body, it's usually what you put into it that needs to be troubleshooted.
I want to know is there a way to centre text vertically without the use of a container element. something which is responsive.
EDIT
the only value I would know is the height of the h3 element, nothing more,
content will appear underneath some as etc
CSS
h3 {
height: 140px;
padding-top: 80px;
min-height: inherit;
border: 1px solid black;
text-align: center;
}
HTML
<h3>TEST</h3>
Here is an example of what i want to achieve
codepen test
Line-height is a beautiful thing, especially if its just text. And if you want to be responsive:
h3 {
background-color: transparent;
height: 40vh;
line-height: 40vh;
min-height: inherit;
border: 1px solid black;
text-align: center;
}
There is no easy way to do this. I have come up with a couple techniques over the years.
You have 80px in padding and a height of 140px for a combined height of 240px. If you know that the text will not exceed one line you can do it using line-height.
h3{
line-height:240px;
...
}
Another way is to use padding if you know the height of your text.
h3{
font-size: 20px;
line-height:20px;
padding:110px 0;/* (240-20)/2 */
...
}
note: I don't like the display: table-cell hack and have yet to need it. Why move away from a table based layout if you're just going to tell the browser to treat the element as a table?
Add to your code:
display: table-cell;
vertical-align: middle;
You will need to adjust your padding. That should work.
This article provides 6 different methods and their associated pros and cons; it explains it far better than I could here. The solutions provided as answers here are good, but the article really covers niche cases and allows you to choose the best method to fit your needs.
http://www.vanseodesign.com/css/vertical-centering/
You're going to have a containing element, regardless. It's just that the body might be the container.
You could do this:
body {
height:100%;
display: table;
margin: 0px;
padding: 0px;
}
h3 {
display: table-cell;
vertical-align: middle;
}
OR...
body {
height:100%;
margin: 0px;
padding: 0px;
}
h3 {
position: relative;
top: 50%;
}
edit - removed width specific styles as it has nothing to do with the solution. Thanks to Jason for the margin/padding set to 0px to remove ugly scrollbars. Jason also noted that this solution did not work for Chrome unless the "body" element in the styles was changed to "html, body", but I was not able to replicate this problem using Chrome version 35.0... For good measure I also opened a test page in Safari and Firefox and they also worked as expected.
edit^2 - Figured out the problem Jason saw. If you use the html5 doctype, then, yes, you will have to include the html element with the body style. This also makes the scrollbar reappear in the relative position solution. So that's fun. I will leave this up for the purpose of saving frustration in the future, but I would check out the link provided in Jason's solution.
http://phrogz.net/CSS/vertical-align/
How can I vertically center text in a dynamically height div?
I ended up setting the display properties of some div's in one of my designs to table/table-cell respectively to take advantage of the vertical-align text support. However, I now have some white-space that I'm struggling to make sense of.
My code (JsFiddle: http://jsfiddle.net/p8zw2/):
HTML
<div class="container">
<p>Test</p>
<div class="mytable">
<div class="tablecell">test</div>
<div class="tablecell">test</div>
<div class="tablecell">test</div>
</div>
<p>Test</p> </div>
</div>
CSS
.container { width: 100%; background-color: #ff0000; }
.mytable { display: table; background-color: #4d4d4d; width: 94%; padding-left: 3%; padding-right: 3%; }
.tablecell { display: table-cell; width: 33%; }
As you'll see on the jsfiddle, the red background now leaks at the right edge where it shouldn't. The 'mytable' div padding is 3% each side (6% total), so setting the width to 94% should ensure it fills the container.
Setting the display property back to 'block' makes it work as I'd expect, but then I lose my vertical-align functionality - so this proves it's down to the table display mode in one way or another.
I've tried all manner of disabling all other padding, margins and borders that might be causing it but have failed. Firebug/Chrome dev tools doesn't shed any more light on the issue.
I'm not looking for work-arounds (like line-height etc for vertically aligning text, I'd like to try and find out what the issue is with this specific code).
Have I missed something obvious/any ideas?
Reset the Margins of the body to 0px, then you need to remove the padding-left and padding-right from the .mytable class and add it to the .tablecell directly, lastly set the width of mytable to 100%. Modified CSS below;
.container { width: 100%; background-color: #ff0000; }
.mytable { display: table; background-color: #4d4d4d; width: 100%; }
.tablecell {
display: table-cell; width: 33%;
padding-left: 4%;
padding-right: 4%;
}
body{
margin:0 auto;
padding:0;
}
Jsfiddle example
*{margin:0;padding:0;}
add these lines of code on top of your style.css file , it will solve your problem this is cross browsers solution ,this is called css reset have a look here for details
I've updated you fiddle to use border-collapse:collapse. You need to read more about paddings in tables(no offense, just to get an ideea how to work with display:table and display:table-cell). Here's the http://jsfiddle.net/p8zw2/3/ . You need to add padding to first and third cell contents.
Your div is now behaving like a table: you cannot put a padding, and by default the cells are "spaced" from each other. This is why with a div of width 94% it looks like it's more.
You need to make the border collapsed and set the width of your div to 100%.
.mytable { display: table; background-color: #4d4d4d; width: 100%; border-collapse: collapse; }
It should work.
Most browsers have default margin for body element. Depends on the browser. Some have just padding, some just margin for the body.
Can you try this,
*{
margin:0;
padding:0;
}
Demo: http://jsfiddle.net/p8zw2/5/
body{
margin:0;
padding:0;
}
Demo: http://jsfiddle.net/p8zw2/2/
.tablecell{width:33%} is causing the problem.
33% * 3 = 99%, 1%is the gap.
I have given grey background to .container instead of .mytable and red background to p.
Try:
.container{width:100%;background-color:#4d4d4d;}
.mytable{display:table;width:94%;padding-left:3%;padding-right:3%;}
p{background-color:#f00;margin:0;padding:10px 0;}
Updated fiddle here.