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.
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 an html page broken into 4 parts: Header, menu, content and footer.
Header is at the top, footer at the bottom. In between are the menu on the left and the content on the right.
The height of the page may be set by the menu or the content, depending on which is bigger (both can change).
I want to put a background on the menu block that extends to the footer, even if the actual menu items are much shorted. So, basically, I want the menu block to be filled in, based on the size of either it or the content, depending on which is bigger. Any ideas?
Demo: http://jsfiddle.net/176dgmhy/
This can not be achieved using anything but display table or javascript.
Display table-cell makes divs act like table cells but without cluttering the css with table elements like tr,td, and so on.
* {
border: 1px solid;
}
header {
padding: 20px;
text-align: center;
}
.cont {
width: 500px;
}
.wrap {
display: table;
width: 100%;
}
.wrap > * {
display: table-cell;
}
.menu {
width: 30%;
}
.wrap .stuff {
height: 200px;
}
You could set up the menu and content areas with display: table-cell:
//add the table div as well as the cell class to menu and content
<div class="header">header</div>
<div class="table">
<div class="cell menu">menu</div>
<div class="cell content">content</div>
</div>
</div>
<div class="footer">footer</div>
.header, .footer { width: 100%; height: 50px; }
.table { display: table; width: 100%; }
.cell { display: table-cell; }
.menu { width: 50px; }
.content { }
JSFiddle Demo
Method 1 :
Use flexbox
This is an example of how to achieve your goal using a flebox.
Method 2 :
One way to do so would be setting -
html, body {
height: 100%;
}
and then
div {
height: 100%;
}
This will allow the div to take full height of the screen.
But the drawback of this is that if the content is too big, then it might get cut on smaller screens
Here is a pen as an example
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.
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
I want to createa a div, who has some links, and a logo image. The thing is that I don't want that the div to resize to the image size. I want that the image ovelap the div. I want something like the image. But when I add the image inside the div, the div size is increased to contain the image.
What you are saying is that you want to remove the image from normal flow. There are several ways to do that:
Float
img {
float: left;
margin: <position it with this>;
}
Floating is handy because it will remove the element from normal flow, while still giving you the option of clearing the float. It will also push the float: right navigation away when near. The only downside is that it's not as powerful as absolute.
Absolute
#nav {
position: relative; /* child positioned in relation to the first element with non-static position */
}
img {
position: absolute;
z-index: 1;
left: <position it with this>;
top: <position it with this>;
}
Absolute completely removes the element from flow, so it won't interfere with anything, including the right navigation (this could be a downside). You can position it accurately with left and top.
Negative Margin
img {
margin-bottom: <some negative number>;
}
This will pull the bottom of the container up, making it look like it's out of normal flow, without the consequences of that. I personally prefer this solution. It will work as long as you can calculate the correct margin-bottom for it to look right.
Plain, fixed height
#nav {
height: <some height>;
}
The simplest solution: just give your navigation a set height.
You can use absolute positioning:
HTML:
<div class="main">
<div class="image">Image Div</div>
</div>
CSS:
.main {
border: 1px solid green;
width: 50%;
height: 50px;
}
.image {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
border: 1px solid blue;
}
You can try it here.
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
I have tried overflow and using clear: both; but I can't get the child div heights to be equal, I don't want the heights to be static. Can someone help me achieve this?
Here is fiddle showing the problem.
Since you seem to have static widths, but you don't want static heights, you could fix it by setting the container div to position: relative; and then having one div float left, and positioning the other div's absolutely. Something like in this jsFiddle.
The one floating div will ensure the container div has a height, and the absolutely positioned div's will automatically resize to the same height as the floating div. You would then have to set overflow-y: auto on the absolutely positioned div's to ensure that scroll bars will appear inside of them if their height exceeds the height of the floating div. This should work in all browsers.
div.container {
position: relative;
width: 800px; // height will be determined by the content of div.left
}
div.left {
float: left;
width: 400px; // height will be determined by its content
}
div.middle, div.right {
position: absolute;
overflow-y: auto;
width: 200px;
bottom: 0px; // These two lines will ensure that this div's height
top: 0px; // is equal to the height of div.left and div.container
left: 400px; // Value should be equal to the width of div.left
}
div.right {
left: 600px; // Value is the sum of the width of div.left and div.middle.
}
P.S. If all you want is for the background-color to fill the whole container div (as your post title suggests), you could just set the background-color on the container div.
Well, the best way to achieve this without Javascript would be to use css3 flexible layouts
#newTask .body {
display: -webkit-flex;
-webkit-flex-direction: row;
}
Something like this, but prefix of the browser you are using.
You can use display: table; on #newtask .body and then display: table-cell; on all of its child divs (left, middle, right).
This would make it behave like a table and would ensure that all divs are of equal sizes.
#newtask .body {
display: table;
}
#newtask .body > div {
display: table-cell;
height:100%;
}
Fiddle: http://jsfiddle.net/mv46q/1/