I have a sidebar and a content area. I just floated the sidebar to the left and the content area to the right. But I have problem when the screen size changes. There occurs a significant space between the two floats. I think it's due to the size of the image in the content area and since it's floated right. Hence I floated this content area also to the left. now the content area is not extending to the extreme right end of the screen. Is there any way to put the content area fit in the right portion without any space (just the space to divide the sidebar and content area is enough)?
If you need more explanations, please let me know.
Change your CSS to this:
.dashContent {
float: left;
margin: 10px;
position: relative;
top: 25px;
min-width: 80%;
}
.sidebarDash {
float: left;
height: auto;
width: 195px;
}
This will remove the space and also retain fluidity in the layout - Removed as the OP wants a fixed layout
Place .sidebarDash with adsolute position and give padding-left the same as sidebar width to .dashContent
Wrap these two in one main DIV as -
<div class="dashContainer">
<div class="sidebarDash"></div>
<div class="dashContent"></div>
</div> <!-- Clears the float with CSS -->
CSS -
.dashContainer{ overflow: hidden; position: relative }
.sidebarDash { position: absolute; left: 0; top: 0; width: 200px; }
.dashContent { padding: 0 0 0 210px; }
jQuery -
Insert this in <head> section of the document -
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
var sidebarHeight = $('.sidebarDash').height();
$('.dashContainer').css('min-height', sidebarHeight);
})
</script>
Instead of using float:right use float:left so both divs stay together, have a look on this fiddle
http://jsfiddle.net/FZZnk/
Let me know if this solve your problem
First, you need to use percent to all of the divs width.
second, you can make the both float to the same side (right or left), and use margin or padding in percent to make to space between these divs.
.dashContainer{ overflow: hidden; width: 100%; }
.sidebarDash { float: left; width: 20%; }
.dashContent { float: left; width: 80%; }
Now, because your left side bar has a fix width and float left, you can do this:
remove the float right, and add margin-left at the size of your side bar.
and don't forget to set the div to width: 100%.
.dashContent {
float: right;
margin-left: 210px;
position: relative;
top: 25px;
width: 100%; }
Related
Learning CSS basics and was doing layouts with floats. I know CSS Grid and Flexbox are best practice and I intend to learn them, but wanted to understand the basics of floats before I move on.
body {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 600px;
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
.col-main {
float: left;
width: 100%;
}
.col-left {
position: relative;
float: left;
width: 200px;
margin-left: -100%;
right: 200px;
}
.col-right {
float: left;
width: 125px;
margin-right: -125px;
}
<body>
<div class="wrapper">
<div class="col-main">Main Content</div>
<div class="col-left">Left Content</div>
<div class="col-right">Right Content</div>
</div>
</body>
On an intuitive level I understand how .col-left works. margin-left: -100%; represents 600px width of the parent element placing it along side .col-main and position: relative; combined with right: 200px; puts it flush within the reserved left padding of the parent element. In fact, it doesn't have to be -100% it can be -200% if you like and push .col-left completely off the screen.
However, I cannot grasp how .col-right works. Having a negative value in margin-right that's equal to the absolute value in width places the .col-right on the same line, neatly sticking out on the right side of the parent element. It's great but I don't understand how or why. What's more, is that if you change margin-right to -200px or heck even -1000px it will still be in the same position. Why?
Float's meaning is basically floating :). You can insert value How much you want. But in the end it floats to right. Because wrapper's width not enough to changing to your see. if you add more width to wrapper and specify scalable value to .col-main (like 50px). You can see more understandable. Because .col-right is in over .col-main. like z-index shits
I am trying to add a fixed division to the left of the webpage that will keep the navbar information and on the right I am trying to add another division. It is currently not allowing me to put them side by side (the one I wanted to add to the right is overlapping with fixed). How can I align them side by side?
Here is my CSS:
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #041230;
z-index: 100;
min-width: 170px;
}
.right_side {
position: relative;
width: 100%;
height: 100vh;
}
since you set a width:16% for the fixed element you should set the rest 84% width:84% to the right element.
Next set a max-width to the right element since the left element has a min-width I have set this to max-width: calc(100% - 170px)
Align the right element to the right by adding float: right.
I have made the left element translucent so you can see that there is no overlap.
Read and run the snippet below to understand it in detail.
P.S : I have made the left element translucent so you can see that there is no overlap.
Hope it helps
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #0412303f;
z-index: 100;
min-width: 170px;
}
.right_side {
width: 84%;
background-color: green;
height: 100vh;
float: right;
max-width: calc(100% - 170px);
}
body {
margin: 0px;
}
<div class="left_fixed">
<h1>LEFT SIDE</h1>
</div>
<div class="right_side">
<h1>RIGHT SIDE</h1>
</div>
The reason that your styling fails is that the "Position: Relative" will not be relative to the "Position: fixed".
In order to accomplish the effect you are looking for I'd suggest you to use float:left on both elements instead.
You can wrap the two divs inside a parent div, and then add display flex to the parent div. This will make the two divs next to each other, and then you can add custom width to .left_fixed.
I have two divs: menu and content. Menu is fixed on the left, and content is centered. The problem is that with lower screen resolutions, the menu overlaps the content.
Here's some css:
#content {
width: 1000px;
min-height: 100%;
margin: 0 auto;
}
#menu {
z-index: 20;
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
So, basically, I want the content to be centered with a left minimum of x px.
Is there an easy solution for that?
just set up a Wrapper div parent to the content div... and give the wrapper margin-left: 100px; or however much you want.. simple as that
you could use min-width
That should be the easiest solution. Otherwise post your code on http://jsfiddle.net/ so we can review it
I'm having an issue with a fluid sidebar and a content box next to it.
I designed my left #sidebar to my liking, but not I'm having trouble making a content box that fills up the remaining space next to it.
I'd like to have the whole project take up 100% of the page width. The problem is coming from the min/max widths on my sidebar.
Been goin' hard on this all day and still having problems, void space between, overlapping ,ect.
http://jsfiddle.net/DrDavidBowman01/PjLgE/
CSS
#container {
width: 100%;
display: block;
height: 100%;
}
#sidebar {
display: block;
width: 22%;
float:left;
min-width: 236px;
max-width: 332px;
height: 100%;
position: fixed;
border: 2px solid #0C6;
background-color: #000;
}
#content {
width: 88%;
height: 400px;
border: 6px solid #F00;
display: block;
color: #fff;
float: left;
position: relative;
max-width: calc(88% - 236px);
min-width: calc(88% - 332px);
}
HTML
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
It's a combination of two things. First, if you want to have divs take up 100% height, then you'll need to set the body and html to that as well.
html, body {
height: 100%;
}
Second, you have set the sidebar as position: fixed. This is just like having position: absolute set on it. If you want the sidebar to remain visible at all times, you can do a margin-left: 22%; (or whatever the width of the sidebar is) on #content. If you want the sidebar to flow with the rest of the page, just remove the fixed position.
This is because your sidebar is position: fixed. The best route would be to relatively position/float the sidebar at 100% height and position a fixed wrapper within it.
basic demo
I am trying to build a page that has a header and a left-sidebar, and has an iframe in the content area. I wan't the Iframe area to fill the whole content area(the whitespace), but cant seem to get it to work. I am looking for the IFrame to fit perfectly, meaning that it begins where the header and left menu edges end. I can only seem to get it to span from one side of the page to the other, or get it in the middle of the whitespace.
Can anyone help?
Here is the JsFiddle: http://jsfiddle.net/P9CH9/2/
When removing the <div id="iframe-content"> it will span the iframe from one side of the page to the other.
I was able to achieve what I wanted by manually adding the margin top and left to the iframe container and also set the Top, left, right, bottom to 0 as such:
.abs-frame-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-left: 250px;
margin-top: 55px;
}
Here is the latest JFiddle, I added black to show where the iframe is since JsFiddle doesn't seem to allow Iframes. http://jsfiddle.net/P9CH9/4/
You set width 100% for wrappend and fixed the menu, so the wrapper does not consider at all the menu and gets the full width of the screen
Main Modification :
.menu {
background: none repeat scroll 0 0 #202020;
float: left;
margin-top: 55px;
position: fixed;
width: 25%;
height: 100%;
z-index: 2147483647;
}
.wrapper {
float: left;
margin-top: 55px;
width: 75%;
margin-left: 25%;
}
And this solution is responsive.
See : http://jsfiddle.net/joseapl/P9CH9/5/