I am making a web project http://conatus.in/alumniconnect/index.php?page=about
I need to have a floating right sidebar, to accommodate different panels for facebook, news etc.
However, the right sidebar is not working properly. Right sidebar's div id is "sidebarright". CSS is
#sidebarright {
float:right;
}
The contents are posted just above the main panel (<div id="content">)
Left sidebar <div id="sidebar"> with following css is working good.
#sidebar {
float:left;
width:250px;
}
I tried several combinations using firebug and dragonfly, but just cant make the right sidebar to properly float.
Use position:fixed; That makes your sidebar float when you scroll too.
I finally used
#sidebarright {
float:right;
}
When I added more content on the right div it float:right started working...
Related
Here is a nice tutorial on how to create a web layout with a main section and a lateral bar. I´m focusing on the float example.
My question is: is it possible to properly move the position of the lateral bar from the left to the right side? I have changed the lines float: right; with float: left;, margin-right: 170px; with margin-left: 170px; and border-right: 1px solid gray; with border-left: 1px solid gray;.
By doing this the bar shifts to the right side but if I increase the number of the line´s text inside the lateral bar (for example by replicating several times <li>London</li> inside the <ul> tags) the content of the lateral bar overlaps the footer! If I do the same with the bar on the left side (as in the example), the footer correctly shifts to the bottom of the page to accommodate the extra data but than there is a problem with the vertical grey bar that separate the main section to the lateral bar.
How this can be solved? How can the layout be modified to have 2 bars (one on the left and one on the right) with undefined lines of text that do not overlap the footer section?
Use this as your CSS
#left-bar{
float:left;
width:100px;
height:100%;
border-right:1px solid black;
}
#right-bar{
float:right;
width:100px;
height:100%;
border-left:1px solid black;
}
Your HTML will look like this
<div id="left-bar">This is on the left</div>
<div id="right-bar">This is on the right</div>
You have to imagine yourself how a html file is build and how it will be displayed. All containers you have are listed below each other in plain html. With css you can define a floating structure by asigning component dimensions and margins and paddings. To align components horizontally you need to have a wrapping container (r.g. the body or a div within the body) with a fixed pixel size. Then you can define e.g. 3 components, a left side bar, an article middle field an a right side bar. These containers will be childcontainers of the wrapper, so they are defined within. These subcontainers you asign a size, normally by % and fineposition them with margins. In chrome and firefox you can see the margins and paddings in the dev console (press F12) under Box-Model.
Css can be quite frustrating. When I teached it myself by building my own website, I lost plenty of ours with this.
You can check out my website for reference. It's a plain Html/Css website, no positioning by JS or php.
It isn't the most beautiful website but the structure framework works as it should. See here: http://richardrudolph.com/
i am not sure if this is what you want . the navigation is on the right.
<https://jsfiddle.net/zpupster/v659zpod/>
Maybe you want to read more about CSS grids, they make such a work you may find tedious easy.
As for the time being I really did not get your question very well, but I believe if you wrapped every section of your HTML in its proper tag you will be able to just use the CSS float property to put them wherever you want. So the lateral bar I believe this is the aside section which would be in an aside tag
<aside>
<ul>
<li>
this is a dummy link
</li>
</ul>
You would just float the whole aside tag to the right as it will by default be floated to the left, so the CSS
aside{float:right;}
OK so I'm creating my first page and hit a brick wall here. I have a side navigation bar, main top navigation bar with containers below that for content. My problem is that the navigation bar on the left (seems) depicts the position of the carosel viewer container below the thre mini containers below the top navigation bar. EG The central containers begin at the lowest point of the navigation bar on the left.
See Images:
I'm trying to place the blue image carousel container directly below the three central mini containers but the highest up the page it will place itself is the bottom most point of the left side navigation bar. I'm very new to web page design this is not my thing and would like some help here.
I have copied the code into JS BIn for you to take a look at, I also notice there that the three mini contatiners below the top navigation bar are longer than my web page view so maybe it's those that are causing the problem and not the side nav bar??
JSBin link:
http://jsbin.com/dimekupo/1/watch?html,css,js,output
http://jsbin.com/dimekupo/1/edit?html,css,js,output
Many thanks
I wasn't able to get your code example to work for some reason but I but together a simpl example. This looks like a problem with floating. If you add float:left to your sidebar's CSS and float:right to the CSS of the carousel and the main content container that weird spacing should disappear.
Here's an example of what I'm talking about.
http://jsfiddle.net/7QzAu/3/
CSS
body {
width:900px;
margin:0 auto;
font:26pt Georgia;
color:#fff;
text-align:center;
}
#sidebar {
float:left;
width:200px;
height:400px;
background:Red;
}
#content {
width:700px;
float:right;
height:350px;
background:blue;
}
#below {
float:right;
width:700px;
height:200px;
background:green;
}
HTML
<div id="sidebar"></div>
<div id="content"></div>
<div id="below"></div>
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
I am currently working on a website design using the 960 grid system and came across a small snag in the final moments of the design.
Ultimately, I just want to set my header and footer bars to be 'fixed' on the page, so that they will remain stationary even when the rest of the page is scrolling. Here is a great example of a fixed navigation bar.
http://ryanscherf.net/
Mine wont be vertical, but you get the point.
The problem that I am coming across is that the header works perfectly, and exactly the way I suspect it will. Here is the HTML for my header
<div id="header">
<p>
ATS Logo
</p>
</div><!--end header-->
and the css to make it stretch and fix the position
#header
{
background:grey;
width:100%;
height:65px;
position:fixed
/*padding:15px;*/
}
This solution works exactly the way i want it too. However, when i apply the same exact settings to the footer, it causes undesired results.
Here is a fiddle to show what I mean. You will have to uncomment the 'position:fixed' line for the footer to see what i mean.
http://jsfiddle.net/s4cWP/
and full screen
http://jsfiddle.net/s4cWP/embedded/result/
Its worth noting that in addition to using my own css (located at the top of the jsFiddle!) i am using the 960 reset grid and 960 12 column style sheet.
I would really appreciate a push in the right direction. Is there something im not accounting for here?
Thanks!
I'm assuming you want the footer to always appear like the header: JSFiddle.
New #footer:
#footer
{
background:grey;
width:100%;
position:fixed;
bottom:0;
left:0;
}
Also, due to overlapping, I added padding to the bottom of the #container:
#container
{
padding-top:75px;
padding-bottom:30px;
}
On my companys website http://www.ensorbuilding.com , the middle content always overlaps the left menu, sometimes the right menu overlaps the other two.
The code looks like this
<aside id="left_menu"></aside>
<section id="content"></section>
<aside id="right_menu"></aside>
I have used many javascript auto height fixes but none of them seem to have worked?
Can anybody shed some light into this?
Thankyou!
Haven't seen your code but if I made it, I would affect to the three parts (both menus and content) a fixed width.
For instance in CSS:
#left_menu{
float:left;
width:200px
}
#right_menu{
float:left;
width:200px
}
#content{
float:left;
width:600px
}
Elements' height does not matter for your issue.