Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
margin: 0px auto; is not working with width: 100%; any one know the answer for this
Eg: .abc{
margin: 0 auto 0px;
width: 100%;
<div class="abc">
<input class="acc" type="radio" name="a">
<label>hi.</label>
<input class="cc" type="radio" name="a">
<label>No</label>
</div>
100% width does not leave any space for margin.
margin:0 auto will work only on width less than 100%.
Write
{text-align:center}
to center content inside element.
Demo here.
Because you are setting something as a full width you cannot centre it. The best option would be to set your width as either fixed width for example 'width:600px;' and then use 'margin:0px auto;' the other way would be to use a percentage width for example 'width:70%' and then also use 'margin:0px auto' this would mean that the styled element would grow or shrink to the screen size. With this option you can set the maximum size and the minimum size as well
use "text-align:center;" from the outer div
hope this helps
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am not asking this because it's a problem for me, actually, that's exactly how I wanted to display the divs, but I didn't know they would appear below each other. Why is that? I only gave them width and height, I didn't position them.
I thought they would appear on each other at the same position
<div class="D1">
</div>
<div class="D2">
</div>
<div class="D3">
</div>
<div class="D4">
</div>
.D1,.D2,.D3,.D4{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
/* OR
div{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
*/
Sorry for this probably dumb question, but I'm just curious :D
That's the expected behavior.
div by default are block elements which means that they always start on a new line and take up the full width available.
If you want elements to be on the same line and to only take up as much width as necessary, you must use inline elements, such as span.
Find here a complete reference
By default, the flow of the page will display your divs elements (which are blocks) one below another as you have seen.
If you want to override this behaviour you could set a
position: absolute;
property to your divs so they can be placed wherever you want regardless of the position of other elements. For example you may want to set all your divs at the top left corner by doing:
div {
position: absolute;
top: 0;
left: 0;
}
By default display property is block for div.Change it to inline to display in one line.
If you use float: left; in css, the problem will be solved. Because div element is a block level element.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I saw somewhere that it wasn't recommended to use height and use padding instead, why that? The height and the padding produces the same results - at least in my trials -... is there a reason for me be to be using padding only instead of height?
To answer your question - of course you can use height in responsive websites without a problem.
I think where you may have read about using padding in place of height is for keeping the aspect ratio of an element the same since percentage based padding is relative to the width of the element and percentage based height is relative to it's container.
A common use case for this is embedding a YouTube video in a responsive wesbite.
HTML
<div class="video-container">
<iframe src="//www.youtube.com/embed/k_d5jWvBirU?wmode=opaque&rel=0&showinfo=0&modestbranding=1&controls=2&autohide=1" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
Fiddle here: http://jsfiddle.net/84wm08k7/
As you can see the height of the video-container is set to 0 and the padding-bottom is set to 56.25%. This restricts this element to being a 16:9 aspect ratio for video and is responsive.
well to start if you use padding then the page will stretch itself to fit the screen leaving the given amount of border (padding). If you use a specified height (in pixels per say) the page will always be the same height regardless the resolution of the screen. If you are using height as a percentage or some analogous value, than it shouldn't matter other than that the amount of space (padding) will vary depending on the screen.
It depends on what you're doing. For a lot of my work, I'll set a min-height or max-height that way the element grows or shrinks depending on the content.
Padding would work as well, if for instance you have an element with text that would be centered vertically, you can use padding to control height as well. It's all up to the site design, and what you're trying to accomplish.
this is a code example you can check w3schools.com for further information, I've chosen the example in which you can manipulate the dom
function myFunction() {
document.getElementById("myBtn").style.height = "50px";
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="myBtn" onclick="myFunction()">Change the height of this button</button>
</body>
</html>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have started a new project and I need (only) responsive grid for layout.
I have tried with http://www.responsivegridsystem.com/ this grid system and it's fine but it adds some classes for inputs and other elements that I don't need and it makes a mess in some of my forms.
I am looking for any solution.
I need just responsive grid that will not mess with other elements.
Is there any such framework?
Maybe you can use display:flex , setting min-height min-width for childs to keep safe minimal size where little content.:
http://codepen.io/gc-nomade/pen/wFHfq
In order to see IE 10/11 , working too , you need to add a width or height to main container. Most of the time width:100% will do , here i setted height:100% on body.
This will not work for older browser, you may use vendor-prefix and old syntax to increase compatibility. here is something to read and here too .
body div {
display:flex;/* flex it */
flex-wrap:wrap;
min-width:320px;
min-height:160px;
box-shadow:inset 0 0 5px white, 2px 2px 3px;
flex:1;
}
html,body {
height:100%;/*IE*/
margin:0;
}
body>div {
min-height:100%;
}
div div {
background:pink;
}
div div:nth-child(even) {
background:lightgray
}
BASIC HTML TEST:
<div>
<div>
</div>
<div>
</div>
<div>
</div>
<!-- and so on -->
</div>
try semantic.gs
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any .grid_x classes in your markup. Oh, and did we mention it's responsive?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
This site: http://www.samuelgrant.co.uk
This is exactly the kind of setup I want to build. I'm stuck, however, at figuring out how the maximum width of this site is being set. I want a centered main content area like this site has with the background stretching to full browser width. Can anyone enlighten me? Relative newbie here...any help would be appreciated. Thanks!
HTML
<div class="container">
<div class="inner-w">
Stuff in your inner column
</div>
</div>
CSS
body {
margin: 0;
}
.container {
background-color: #f06;
}
.container .inner-w {
max-width: 50em; /* or 400px etc */
margin-right: auto;
margin-left: auto;
}
a jsFiddle that also shows this column width - and how it can be different in each sections etc.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
is possible to make a specific element about 5px longer that it would automatically be? because my article element has a video element which sticking out of the given space a bit, while I could just set the height manually I thought it would be better to have it set itself automatically (like it normally does) only adding about 5px. Any Help?
I'm not sure I understand the question, but have you tried giving it a padding-bottom of 5px?
Try using a dynamic width to set the width of your contained element.
Eg.
article {
width:300px;
}
contained-element{
width:95%;
}
Just give padding-bottom:5px to your <article> elements, & make height:auto for both elements, then <article> element will expand as per height with 5px at bottom.
Am not very much sure what are you asking about but if it's regarding fitting your video in a div for that you can create a wrapper class such as
.wrapper-div {
position: relative;
padding-bottom: 20%;
height: 0;
}
then have the child element inside it
.element-to-load{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I assume you want to the div to expand if the video is larger than the article.
To do this you just need to:
1) Give the Outer Div a height:auto - and a min-height:
2) Give the Inner Div a margin-bottom of 5px
Check out this Fiddle Demo
Does this answer your question?
Just set the CSS for that element be (use the actual pixel width and height):
height: 25px;
width: 50px;
and the height and the width will be forced to be that height and width.
Although if possible try to use 'em' so that it is automatically responsive.