CODEWITHSUNDEEP
htmlcsslayoutcss-float
Alessandro
Alessandro

Reputation: 21

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><a href="#">London</a></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?

Upvotes: 1

Views: 9810

Answers (4)

David Powell
David Powell

Reputation: 325

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>
   <a href="http://foo.com"> this is a dummy link</a>
 </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;}

Upvotes: 0

craig
craig

Reputation: 55

i am not sure if this is what you want . the navigation is on the right.

<https://jsfiddle.net/zpupster/v659zpod/>

Upvotes: 0

Ueda Ichitaka
Ueda Ichitaka

Reputation: 71

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/

Upvotes: 0

Jaycee Daily
Jaycee Daily

Reputation: 63

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>

Upvotes: 1

Related Questions