Right aligning div inline with a left aligned div? - html

I am experiencing difficulties when I am trying to Right align text links inside a div. I'm not sure what I am doing wrong. But this is the code for the div that is supposed be right aligned:
<div class="menu">
Home
Sign In
Join The Crowd!
</div>
And all the code is here: http://jsfiddle.net/GSfmf/1
I am wanting the buttons still vertically-centered in the header_div, but aligned to the right. And anything that I do doesn't move it.
Thanks, sorry for being foolish about the css.

Take out display table from your header div. Is there a reason your displaying it as a table?
Works fine when you take out display header
div.header_div{
background-color: #ffffff;
padding: 15px 50px 15px 50px;
}

in the css stylesheet just add the following code...think it wd work
.menu{ float:right;}

Related

How to move element from left side to the right?

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;}

Div getting pushed to the right when using float:left on it

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.

html body is displaying left aligned but in css it is set to centered

I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
​

How to move div lowered from edge of page

Here is a jsfiddle http://jsfiddle.net/Jw6kU/2/ of what i have right now. The thing i need to do is drop the white box and the text in that div tag ("left") down so it is center in the green bar at the top (67px tall). How can i easily do this? Sorry this is sloppy, the work was done fast.
This is a second post. The first one i messed up by pasting the wrong link. Sorry.
Using the margin-top css property would give the div space from the top of the page. You'd have to find the right amount of pixels and test it out fully but I think that will help.
I added this to the css of your fiddle and got the white div at the top in the center of the green div under it.
#left {
margin-top: 9px;
padding-top: 12px;
}

Two divs side by side, in a scrollable fixed-size box

I have managed to put two divs side by side using a <div class="clear"></div> as explained elsewhere.
I now want to put two divs side by side, inside a fixed-size box that can scroll horizontally. Vertical space isn't a problem, but the two divs must be side by side and can expand vertically when needed. If space is needed horizontally, they must expand inside the box with fixed width but whose insides can scroll horizontally.
The following code does this with tables, but I was wondering if it can be done with divs as well, to keep the page semantically correct. The div version fails, because it keeps the second pane under the first one, even with a <div class="clear">.
Cheers for any advice!
PS: I can't seem to insert a block of html code in here, so I saved the file here: http://husnoo.com/scroll1.html (tested with chrome and safari, open the source code to see what I mean).
give the right box float:right;and it will stick to the right side :)
http://jsfiddle.net/loktar/Mbs3q/1/
div#wider {
background-color: #ddd;
width: 700px;
float:left;
}
.second_pane{
background-color: #eee;
width: 300px;
float: left;
}
Is that what your looking for? Floats them both to the left so they stick to each other, and are inline.