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 6 years ago.
Improve this question
I've got two divs inside main container's div. First div got fixed width /160px/ and is floated to left, second div contains only button which should be aligned to the right so I set float to right.
Main div has 25% widht of the whole page width and I'm using bootstrap in my app.
Everything works fine until the widh of paret div small to fit both divs so the right one is moved under the left one - but is there some way how to align /center/ second div in this situaton? So where both divs are alone in the row, they should be aligned to center of parent, but when they are in the same row, first one should be aligned to left and second one to right or maybe to center of availible space /parent div widh minus 160px of the first div/.
Many thanks for any advice,
Peter
EDIT:
container style: width:25%;
first /left/ div style: float:left; widht:160px;
second /right/ div style: margin-top:5px;
Here's an example demonstrating how to do it.
#container
{
width: 25%;
background: red;
overflow: hidden;
}
#left
{
width: 160px;
height: 5em;
background: green;
float: left;
}
#right
{
float: right;
height: 5em;
background: blue;
}
#media (max-width: 872px)
{
#right
{
float: none;
clear: both;
text-align: center;
}
}
<div id='container'>
<div id='left'>
</div>
<div id='right'>
<button>
Button
</button>
</div>
</div>
You should use a #media query, with a breakpoint set to a viewport size where the two divs can't fit on the same line.
Then in that media query set the right div to
float: none;
clear: both;
text-align: center;
HINT: View the code-snippet results full-paged, and then resize your window to see the effects.
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
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 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 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/
This question already has answers here:
Horizontal scroll in DIV with many small DIV's inside (no text)
(2 answers)
Closed 9 years ago.
I have HTML structure like this :
<div class="wrapper">
<div class="fixed_column"></div>
<div class="fixed_column"></div>
<div class="fixed_column"></div>
</div>
Here is my CSS :
.wrapper{
width:500px;
float:left;
/*overflow-y:scroll;*/
overflow-x:scroll;
}
.fixed_column{
float: left;
height: 600px;
position: relative;
width: 250px;
}
So I want only two columns to fit inside my wrapper. And so without third column being present it fits inside.
Once I add the third column like in the HTML above, the third column doesn't stay in the same row but it drops to the next line and I end up with vertical scroller instead of horizontal. added overflow-x to my css and I don't get a horizontal scroll-bar but the third column still drops to the next line.
However I tried to increase wrapper to 750px and this time all three columns fit in the same line so I thought nothing is wrong with my css or did I think wrong?
Why would there not be horizontal scroll once my wrapper is 500px and I have three columns inside with width:250px on each.
Add white-space: nowrap; to the container, use inline-block instead of float, and use overflow-x instead of overflow-y.
This works:
http://jsfiddle.net/vXqY2/
.wrapper {
width: 600px;
white-space: nowrap;
overflow:scroll;
}
.fixed_column {
display: inline-block;
height: 100px;
width: 250px;
background-color: red;
}
The floated elements are going to automatically wrap down to the next level if they start going off the right of the parent container. That's how floats work. To keep them on the same line, you have a few options:
Make the parent container wider (as you did), but you'll need an extra element for the scrollbar
Switch from float: left; to display: inline-block; (as #Alex suggested), but you'll need to make concessions for IE7.
Switch from float: left; to display: table-cell;. Don't recommend this, I tried it and it turns out it's kind of painful :-p
See all techniques in a jsFiddle demo
It is because your fixed columns divs are only 250px so they never break the 505px container they are currently in.
Here try this.
example:
<div class="wrapper">
<div class="scroll-container">
<div class="fixed_column">A</div>
<div class="fixed_column">B</div>
<div class="fixed_column">C</div>
</div>
</div>
.wrapper {
width: 505px;
position:relative;
overflow-y: scroll;
overflow-x: scroll;
}
.scroll-container {
width:1000px;
}
.fixed_column {
float: left;
height: 600px;
position: relative;
width: 250px;
background-color: green;
}