Floating Divs Outside of A Container that is 980px

[CarraraWebsiteSolutions]

Hello I would like to know if there is any existing information on Floating Divs Outside of A Container that is 980px that I can read and practice?

Because need to put vertical banners on left and right side out side of the container. If there are any you tube videos on it how to do so please send me link have look at Google nothing im after coming up correct

[Paulie_D]

You mean like this? : http://codepen.io/Paulie-D/pen/57ad1e3163d6478406f39f93fec02086

The sidebars are fixed positioned so they scroll with the page.

You could always absolutely position them if required.

[CarraraWebsiteSolutions]

@Paulie_D

Yes. is it OK if I fork it to me. for me to study and practice? And do you know where I can ready how to do it?

[Paulie_D]

That’s what Codepen is for. Fork away.

[CarraraWebsiteSolutions]

does w3 schools have it

[CarraraWebsiteSolutions]

Just had tooth pulled so doing study to keep mind off

[bLAZYY]

W3 does have it take a look at this

http://www.w3schools.com/css/css_positioning.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed

[Paulie_D]

Please everyone…stop linking to W3Schools.

As has been said many times before a lot of the information on that site either completely wrong or very out of date.

[Paulie_D]

https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

[CarraraWebsiteSolutions]

@Paulie_D have done some tweaking for 980px http://codepen.io/mwbcomputers/pen/urinl

[CarraraWebsiteSolutions]

Hello @Paulie_D just have come across this problem for some reason they show up double images in the container as well as the out side? http://www.mwbcomputers.com.au/sub/index.php?route=product/product&product_id=56

[Merri]

Use `.sidebar.left {` and `.sidebar.right {` instead of `.left {` and `.right {`.

[CarraraWebsiteSolutions]

@Merri for some reason that removed it

.sidebar {
position: fixed;
margin-top: 165px;
width: 10%;
padding: 5px;
border: 1px solid #000;
}
.sidebar .left {
background: url(‘../image/Custom3.png’) no-repeat top center;
margin-top: 165px;
left: 12.9%;
height: 600px;
border: none;
}
.sidebar .right {
background: url(‘../image/Custom3.png’) no-repeat top center;
margin-top: 165px;
left: 76.5%;
height: 600px;
margin-right: 10px;
border: none;
}

[Author]

Posts