How can I prevent the picture from jumping down, when the window gets smaller? I know I haven't used float: right, but that's because the content was too far away from the navi bar then. Do I have to use another div, make that float on the right, and then center the content into it by using margin auto? Or is there any way to prevent browsers from letting the content "jump"?
body {
background-color: #B3B3B3;
}
#links {
float: left;
width: 300px;
height: 200px;
background-color: #e8e8e8;
}
#rechts {
float: right;
width: 500px;
height: 200px;
background-color: red;
}
<div id="links"></div>
<div id="rechts"></div>
Because you use float.
Float depend on width of browsers.Your picture will jump down when browser not enough width.
You should use attribute Position ( absolute or fixed)
You can see this examble: (I use Fixed in this examble)
position:fixed;
https://jsfiddle.net/xe7jxwra/
Some information about Position in CSS:
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html
In your request, you should set your parent of content to Relative, and set your content is Absolute
You can fixed the your navigation bar and put padding-left (navigation bar's width 300px) to the #rechts and remove the margin-left. Like below
#links {
float: left;
width: 300px;
height: 100%;
background-color: #e8e8e8;
box-shadow: 8px 0 10px -4px rgba(0, 0, 0, 0.5);
position: fixed;
}
#rechts {
padding-left: 300px;
font-size: medium;
}
Related
I have this html:
<div class="container">
<div id="sidebar">
<ul>Create Offer</ul>
<ul>Accept Offer</ul>
<ul>Pending</ul>
<ul>Completed</ul>
<ul>Balance</ul>
<ul>Support</ul>
</div>
<div id="items">
Text
</div>
</div>
this is the css:
.container {
margin: 0 auto;
background-color: white;
border: 1px solid black;
width: 1000px;
}
#sidebar {
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
.container #items {
width: 82%;
float: right;
background-color: red;
}
output: http://puu.sh/l719c/52f182e1d2.png
why wont the items div show within the container in the white space next to the sidebar?
thanks.
When you float an element, it moves to the side and lets content that follows it move up beside it.
That means the content that follows items (if there was any) would be next to it.
You've done nothing to let items move up beside sidebar.
You need to float sidebar left and not items right.
Also beware of horizontal margins/padding making the total width of the elements add up to more than 100%.
Also note that floated elements do not restrict the height of their container unless you do something about it.
I'd generally look to flexbox for aligning blocks on a row, rather than floats.
You have just missed one line. The float for the sidebar must be set so that other elements can use the empty space. Change your css for #sidebar as follows.
#sidebar {
float: left;
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
I'm assuming you want your sidebar set to float:left;. So you can position the "items" right next to the "sidebar" div.
I'm trying to get a button to position at the bottom of a div.
I'm using the position:absolute for the button and setting the parent div to position:relative.
But for some reason, the button at the bottom overlaps over the content once the content extends down. I'm not sure what's causing it to overlap.
Here's a fiddle: http://jsfiddle.net/LHxeP/8/
Here's my CSS:
.a{
width: 33%;
float: left;
border: 1px solid red;
position: relative;
text-align: center;
padding: 2%;
}
img {
display: block;
width: 100%;
max-width:150px;
height: auto;
margin: 2% auto;
}
.button{
position: absolute;
bottom: 5px;
background: green;
display: block;
left: 50%;
width: 50%;
margin-left: -25%;
border-radius:10px;
}
I'm not sure if it has something to do with the initial height being set on the parent elements either. I know that some of the content will vary within each div which will extend the height of the div.
I have a jQuery script that will check the longest height parent div and then the rest of the child elements to match the longest div, hence the inline height.
I hope that makes sense. It's been a long night.
http://jsfiddle.net/LHxeP/9/
the absolute position of the button makes the button be over the div content
because you use position absolute, you must increase the height of the div (to reserve some space for the button)
.a {
width: 33%;
float: left;
border: 1px solid red;
position: relative;
text-align: center;
padding: 2%;
padding-bottom: 50px;
}
i added padding-bottom: 50px; to reserve some bottom space ... you may change the value, depending on how big the button is
Firstly, don't use the inline CSS if possible. put the height value in your '.a' class (also you might want to consider renaming '.a' since that is very similar to the link element <a>).
Secondly, and in response to your specific problem, set the height attribute of your 'a' class to auto and it will accommodate for the height of your content.
.a{
width: 33%;
height: auto;
float: left;
...
That happens because you are setting a fixed height in the div, so the position absolute of the button causes the overlapping when the content of de div exceeds the height set.
I recommend use overflow: scroll if you want a fixed height, and you could set the button in the top of the content and just under the image. Doing this you don't need to set position:absolute to the button. Maybe it is not the best solution, but I hope this helps.
I'm trying to do a 4-frame design with css, as in this code:
http://jsfiddle.net/7qBKJ/1/
But I don't want to use position:absolute;, and I'm trying to do it like this:
topframe: block;
left,right and centerframes: inline-block;
And I want to ensure there is, say, 200px of width in both rightframe and leftframe, and the remaining parts should be filled by centerframe. How can I manage this without absolute positioning?
I tried this, but it moves the frames up and down, when the screen width decreases :
http://jsfiddle.net/V4vAc/2/
in this fiddle, centerframe aligns with leftframe, since they are both inline-block, with centerframe rule margin-left:0px; but I have no idea how to set centerframe's right to align with rightframe's left, without specifying a width.
So how can I make #centerframe's width equal to screen width - 400 px ?
Thanks !
What you have to do is to put both sidebars first in the flow of the document. Then you float the first sidebar right and the second one left.
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
/* main.css */
#left {
width: 200px;
height: 100px;
background-color: blue;
float: left;
}
#right {
width: 200px;
height: 100px;
background-color: red;
float: right;
}
#center {
width: auto;
height: 100px;
background-color: green;
margin: 0 200px;
}
http://jsfiddle.net/samgh/JjsFF/
If you want center to be the full width underneath the two sidebars, you can remove the margins. Hope this helps.
Two divs are side by side, one is floating left with a width of 25%, the other just has a width of 75%. But when padding is applied on the right hand div, the padding doesn't work properly.
Here is a JSfiddle example:
http://jsfiddle.net/88upt/
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
CSS
#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
}
#bottom {
background-color: red;
min-height: 70%;
}
Can someone explain to me why this is happening?
Thanks
Floating something is kind of like making it's position absolute. It will hover on top of it's neighboring containers. Add a margin-left equal to the width of the floated element to make the container the correct width.
http://jsfiddle.net/88upt/4/
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
margin-left:25%
}
EDIT Elaborating a bit more.
The floated element pushes the content of the sibling elements over. It will not push the left side of the content's element over. The padding is there it's just hidden by the floating element.
Add overflow = "auto" in the #middle.
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
overflow: auto;
}
In this way, you don't need to know the width of floating element.
Width doesn't factor in padding.
Source: http://www.w3schools.com/css/css_boxmodel.asp
The width only applies to content, not padding, border, or margin.
You can find more information here.
In a wrapper div, the floated elements don't seem to respond to left and right margin settings. Example:
html:
<div id ="wrapper">
<div id = "content"></div>
</div>
css:
#wrapper
{
width: 1000px;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#content
{
width: 400px;
height: 200px;
display: block;
float: left;
margin-left: 30px;
}
The #content ignores its left margin setting. Why?
Margins do not move floated elements, they "push content away".
If you want to move the floated element, you could give it the following CSS rules:
#content {
position: relative;
left: 30px;
}
An alternative is giving the element a transparent border:
#content {
border-left: 30px transparent;
}
If you are just looking to position a div inside of another div, then use absolute positioning:
#wrapper {
position: relative; /* required for absolute positioning of children */
}
#content {
position: absolute;
left: 0;
}
A more recent CSS technique that works perfectly in this scenario is to use the CSS transform property with a translate X or Y. This acts on the floated element only, so does not have the unintended effect of moving other elements around.
An example transform is this:
.floated-element {
// move the floated element 10 pixels to the left
transform: translateX(-10px);
}
#Marcus's answer is good. Another way to fake having margins on a floated element is to put the content inside of another container and use padding:
.outer
{
float: left;
padding: 10px;
}
.inner
{
}