Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a sidebar on the right and I want to create two centered together columns for Tumblr posts on the left. What can I do?
#wrapper /*for two columns*/ {
display: inline-block;
margin: 15px 15px 15px 30px;
}
#wrapper .posts {
width: 400px;
margin: 0 15px 15px 0px;
padding: 10px;
}
#sidebar /*including some other stuff, obviously*/ {
display: table;
width: 250px;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
}
To make HTML elements center aligned:
For Block element such as div, p, ..etc., these should have width or max-width set to some value and there should be margin-left: auto & margin-right:auto
For inline element such as span, em, ..etc., we can center align by giving text-align:center to its parent element.
Your horizontal margins on #wrapper should be set to auto. That’s the key. The parent (possibly the body) may need to also have set text-align: center.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How to place the Scroll button to the bottom of the first page?
Using bootstrap code and not using extra CSS.
Example site
This is what I mean:
you can use position fixed? that would keep it at the bottom of the page
button{
position:fixed;
bottom:20px;
}
https://jsfiddle.net/Lf5o705a/
or position absolute would keep it at the bottom of the first section
button{
position:absolute;
bottom:20px;
}
https://jsfiddle.net/Lf5o705a/1/
I don't think bootstrap has anything built-in for this.
If you want to write some css, consider the following example:
HTML:
<div class="outside">
<div class="inside"></div>
</div>
CSS:
.outside {
height: 300px;
background-color: #eee;
position: relative; /* This allows you to position something absolutely within this element. */
}
.inside {
height: 50px;
width: 100px;
background-color: #ccc;
display: inline-block;
position: absolute; /* This allows you to specify the position within the parent element */
bottom: 10px; /* will be located 10px from the bottom of 'outside' */
/* This is a method for centering an absolutely positioned element */
left: 50%;
margin-left: -50px; /* Half of the width, so that it can be centered
}
Example fiddle
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have been trying(very hard)to get this slider to remain inside the black area of the background image. I can do it if I set all the widths etc. to fixed values but
then the page is no longer responsive. When I try using percentages everything scales with the browser but the slider jumps around...Mock up is running at:
http://www.skaliwag.com.au
Hello i think i fixed your problem.
It's very simple. You just need to change two values in your css: the .rslides margin to 65% auto and remove the margin-top of the image. Then it should look like this.
The slider div:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 70%;
padding: 0M
margin: 65% auto;
}
and the image:
.rslides img {
float: none;
display: block;
height: auto;
width: 100%;
border: solid 1px;
border-radius: 10px;
position: relative;
}
Hope it was helpfull :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a problem with my school project. I want to make two columns on my page using css, but nothing is working...
Website : http://kitlab.pef.czu.cz/~wbdinfo141528/
CSS : http://kitlab.pef.czu.cz/~wbdinfo141528/css/style.css
I hope that there is some dumb mistake, but I can't figure out, where the problem is.
I want to place the right column next to the left one :
Your margin was taking up the entire row, that's why the second div was pushed down. You don't need margin, just set the width and display it as an inline-block. The inline-block means it'll still be a block, but will wrap like text - so if there's enough space for the second div to be in the same row as the first, it can be.
Replace CSS with this, comments for what was changed.
div.leva {
background: blueviolet;
/* float: left; */
/* margin: 5px 500px auto auto; */
width: 49%;
display: inline-block;
}
div.prava {
background: yellow;
/* float: left; */
/* margin: 5px auto auto 500px; */
display: inline-block;
width: 49%;
}
Alternatively, you can use a relative container div and set that to 100%, and have two absolute divs inside the container with 50% width.
HTML
<div class="container">
<div class="leftdiv"></div>
<div class="rightdiv"></div>
</div>
CSS
.container {
position: relative;
width: 100%;
}
.leftdiv, .rightdiv {
position: absolute;
width: 50%;
top: 0;
}
.leftdiv {
left: 0;
}
.rightdiv {
right: 0;
}
You must add margin:0 in div leva et prava http://jsfiddle.net/rvp5js2w/
At first glance your floats are incorrect.
The purple is floated right while the yellow is floated left.
Set a width (where width is less then total width of stranka/2) for each of these div's and then float them correctly and it should line up.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have been having trouble for many days, and have asked several related questions in regards to these issues. My main question here is how to stop my divs from overflowing. I just managed to fix a problem with them being wrapped onto a different line.
Here is a fiddle.
And here is a snippet:
#main-content {
padding: 0% 15% 0% 15%;
overflow: hidden;
height: 620px;
clear: both;
width: 70%;
border-style: solid;
border-color: #31679a;
border-width: 0px 0px 2px 0px;
}
#side-bar {
float: left;
max-width: 28%;
height: 99%;
padding: 1% 1% 0% 1%;
font-size: 14px;
}
#container {
float: left;
max-width: 68%;
height: 100%;
padding: 1% 1% 0% 1%;
}
Main content contains both sidebar and container, which sit side by side (with the sidebar to the left)
You can see in the main content area, that the container overlaps the sidebar at certain widths, instead of stopping at it's edge. This also happens with the images in the header, but that doesn't show in the fiddle.
I would greatly appreciate any help.
As a quick fix, adding the following code to your CSS would stop the links from wrapping onto a new line:
#sidebar a {
white-space: nowrap;
}
However your real problem is that your sidebar div isn't wide enough to contain its content.
You should also be using divs instead of tables for layout purposes: read why here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
As per my knowledge, Absolute positioned element and floated element are removed from the normal flow of html (correct me if i am wrong).
Here's my jsFiddle
Here's my code:
<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>
my css:
.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
when i write anything inside my main-area why does the right-sidebar slides to down.
Add a top property to the side bar
.right-sidebar {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
When position absolute is specified you are expected to position the element, meaning you must set its top, bottom, left and right properties to the values you desire. If one of these properties is not set the browser positions them, since they will be set to auto.
As they have told you, put top:0 to fix it.
Ok, the reason:
Check this link: http://dev.w3.org/csswg/css-position/#abs-non-replaced-height
The section you are looking for is the 2nd rule: (emphasis added by me)
If ‘top’ and ‘bottom’ are ‘auto’ and ‘height’ is not ‘auto’, then set
‘top’ to the static position, then solve for ‘bottom’.
And that is the reason. Remember, top defaults to auto not to 0.
Add top:0; to your right bar. It should not longer push down after that.