I want to position five equal sized div containers horizontally, next to each other. So far, I am setting the position and sizes explicitly:
#container1{position:absolute; top:0px; margin:20px 0 0 5px; width:260px; height:90%; padding:0 10px;}
#container2{position:absolute; top:0px; margin:20px 0 0 270px; width:260px; height:90%; padding:0 10px;}
#container3{position:absolute; top:0px; margin:20px 0 0 535px; width:260px; height:90%; padding:0 10px;}
#container4{position:absolute; top:0px; margin:20px 0 0 800px; width:260px; height:90%; padding:0 10px;}
#container5{position:absolute; top:0px; margin:20px 0 0 1065px; width:260px; height:90%; padding:0 10px;}
But I want users with different screen sizes to see the whole web page without having to scroll. I could set the width of each div to 20%, but then how would I position them?
Thank you very much
You can use floating position i.e. http://jsfiddle.net/aK7Lv/
Markup
<div class="floating">1</div>
<div class="floating">2</div>
<div class="floating">3</div>
<div class="floating">4</div>
<div class="floating">5</div>
Css:
.floating{
float:left;
width:20%;
background:red;
height:200px;
}
Just use the float property.
#yourDiv
{
margin:0;
padding:0;
width:20%;
float:left;
}
Related
This is my design code. Problem is I have slider in which Image sizes I have set according to screen size. But my problem is content below slider is overlapping on slider part. What should happen is in any screen below slider that content should come. If I specify the min-image size then when screen size gets reduce it leaves lot of blank space.
HTML Code.
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->
CSS
.slide-part{
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein {
position:relative;
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein img {
position:absolute;
left:0;
top:0;
height:auto;
max-width:100%;
width: auto\9;
}
.about-evio{
width:100%;
text-align:center;
padding:50px 0 50px 0;
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:center;
min-height:20px;
background:#fff;
font-size:1.2em;
line-height:30px
}
Check out this DEMO.
You need to check out the width/height ratio and adjust the padding-top with specific percentage value so the image shows nicely.
HTML:
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="http://placehold.it/1150x350"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="http://placehold.it/1150x350"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->
CSS:
.slide-part{
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein {
padding-top: 27%;
position:relative;
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein img {
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
height:100%;
width:100%;
}
.about-evio{
width:100%;
text-align:center;
padding:50px 0 50px 0;
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:center;
min-height:20px;
background:#fff;
font-size:1.2em;
line-height:30px
}
Change .slide-part min-height to slider image height
See this example
.slide-part{
width:100%;
max-width:1600px;
margin:0 auto;
min-height:300px;
height:100%
}
.fadein {
position:relative;
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein img {
position:absolute;
left:0;
top:0;
height:auto;
max-width:100%;
width: auto\9;
}
.about-evio{
width:100%;
text-align:center;
padding:50px 0 50px 0;
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:center;
min-height:20px;
background:#fff;
font-size:1.2em;
line-height:30px
}
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="http://www.callbox.com.co/programacionWeb/bitramParking/slide_img/images/example/parking_ruta.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="http://4.bp.blogspot.com/-z-1cdSTPYww/Th8pXvziI7I/AAAAAAAAG5k/j9EglrHT_Ik/s1600/20.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->
I've trying to make a test website, but there is a problem.
Here's is a picture, which show you, what's the problem:
The years (2010,2011,2012) are folders, and the '2013' folder contain some pictures. There's a php function, which I can read the folders and the picture names.
The DOM structure:
Főoldal
Elérhetőség
Önkéntes munka
Képtár
Főoldal
<div id="bottom">
bhvdksakd
</div>
The CSS:
#main{
max-width:22cm;
min-width:16cm;
background-color:#fff;
margin:0px auto 20px auto;
border-radius:10px;
padding: 10px 10px 10px 10px;
min-height:100%;
position:relative;
height:auto;
}
#left{
display:block;
width:20%;
min-height:100%;
position:absolute;
margin:0px;
top:0px;
left:0px;
border-right:1px solid rgba(192,192,192,0.5);
}
#right{
display:block;
min-height:100%;
height:auto;
width:80%;
text-align:justify;
position:absolute;
top:0px;
left:20%;
padding:20px;
}
#bottom{
max-width:22cm;
background-color:#fff;
margin:0px auto 0px auto;
border-radius:10px;
}
Is there any css method or anything, that the contain isn't outside of the "right" div?
Thanks!
ps: Sorry for my sentences, but I'm from Hungary :/
Add overflow: auto; to your CSS for the div with overflowing content.
This property will automatically add a scroll bar only on necessary axes to help contain content within the boundaries of the div. So if you have too much vertical content, you get a vertical (y) scrollbar. If you have too much horizontal content, you get a horizontal (x) scrollbar.
How would i fix this logo to allways be in the center top of the page and doesn't move as browser changes size, so when the browser changes size the logo stays in its old position and will not recenter its self.
Here is my current CSS
CSS
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
Thankyou for your help
CSS
body
{
height: 1000px;
}
#logo {
position:absolute;
background-image:url('http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1');
background-size:150px;
width:150px;
height:150px;
position: fixed;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
HTML
<div id="logo">
</div>
Fiddle
Remove your margin, left and right properties and add this one:
margin-left:100px;
This way, your image will always be 100px to the right.
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
z-index:1;
top:0px;
margin-left:100px;
}
I'm trying to add a div block so that it's at the center of the screen. All i have is a fixed background image and it's doing some odd stuff.
CSS:
body {
margin:0;
padding:0;
}
#middle { <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
html:
<div id='middle'>
</div>
<img src="images/backgroundmain.jpg" id="bigbg">
Looks like this:
i want the white div block to be centered in the middle. Is there a better way of applying a background image? I was able to achieve what i wanted by adding the background-image:url property to the html, but i wasn't able to add all the properties i wanted such as fixed margins/width etc..
Change margin:0 auto 0 auto; to margin:0px auto; in the middle class
Upadate your css a below
body {
margin:0;
padding:0;
width=100%;
}
#middle { <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:15px auto 0 auto;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
to the 'middle' div add margin-left: auto; margin-right: auto;
or you could do something like this:
body {
width: 100%; <---make sure you use percentages
height: 100% <---
margin:0;
padding:0;
}
#middle {
background-color:#FFF;
display:block;
width:25%; <--change the width and height to % also
height:25%; <---
left: 37.5%; <--since your div is 25% wide you want to move
<--- it 37% to the right to center it. (100% - 25% = 75% / 2 = 37.5%)
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}
#bigbg { <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
However, if you're keeping your code the same, i'd suggest just switching margin:0 auto 0 auto; to margin-left: auto; margin-right: auto;
I have a CSS two column layout which is fixed and centered. On pages where the navigation is long and the content is short, the footer is not repositioning to below the navigation - it remains at the min-height of the content area and the navigation falls behind the footer.
I have included everything in the fiddle for you to see: http://jsfiddle.net/fmJqw/1/
But essentially, i have the following structure:
<div id="wrapper">
<div id="headerWrapper"></div>
<div id="bcrumbwrapper"></div>
<div id="midWrapper">
<div id="navWrapper"></div>
<div id="contentWrapper"></div>
</div>
<div class="clear"></div>
<div id="footerWrapper"></div>
</div>
The CSS is as follows:
#wrapper{
padding:0px;
margin:0 auto;
width:1000px;
min-height:768px;
}
/*Header styles*/
#headerWrapper{
padding:0px 0px 0px 0px;
margin:0px;
width:1000px;
height:175px;
position:relative;
}
#bcrumbWrapper{
padding:0px 0px 0px 20px;
margin:0px;
width:980px;
min-height:24px;
position:relative;
}
#midWrapper{
padding:0px;
margin:0px;
width:1000px;
height:auto;
position:relative;
}
#navWrapper{
padding:20px 0px 0px 20px;
margin:0px;
float:left;
width:200px;
min-height:513px;
position:absolute;
top:0;
bottom:0;
}
#contentWrapper{
padding:15px;
margin: 0px 0px 0px 220px;
float:left;
width:750px;
min-height:503px;
position:relative;
background-color: #FFFFFF;
}
#footerWrapper{
padding:5px 0px 0px 0px;
margin:0px;
width:1000px;
height:40px;
position:relative;
}
Because I was trying to float both items to the left, but using absolute positioning for one of the divs, things were competing. I removed the float on the content wrapper and removed absolute positioning on the navigation wrapper. I then changed the background colour of the containing div to ensure that it appeared as if the navwrapper ran the length of the page.
So it became:
#midWrapper{
padding:0px;
margin:0px;
width:1000px;
height:auto;
position:relative;
background-colour: #EBE2CA;
}
#navWrapper{
padding:20px 0px 0px 20px;
margin:0px;
float:left;
width:200px;
}
#contentWrapper{
padding:15px;
margin: 0px 0px 0px 220px;
width:750px;
min-height:503px;
position:relative;
background-color: #FFFFFF;
}
No changes to the HTML and no JavaScript needed!
You could always dynamically change min-height with a bit a javascipt, based on the height of the div that holds the content, which I think is #contentWrapper.
You could check CSS Sticky footer out: http://www.cssstickyfooter.com/ but it would take a bit of fiddling to get it to work due to the nature of your markup.