I am working on a new site: http://www.artexe.sk/cpm.
The "right side" of website consists of 9 images absolutely positioned in a relative div. It has width set to 100% and each image in row should have width of 33%.
Now under these images we have #footer which is div and it has width 100%. PROBLEM: In this div, there is a table which also has width of 100%
#footer {
position: relative;
width: 100%;
}
#footer table {
width: 100%;
margin: 0px;
padding: 0px;
}
When I take a look on my laptop #footer has width 1012px and table has 1011px! How is this even possible? When you take a look at it by design the right side of image should be the same as right side of first td in the table.
I also have another question: when I try to set a fixed width of 1012px on the table so every td has a width of 337px (33%). The images have also width of 33% and their width in pixels is 334px! How is this possible?
EDIT!!!
This is css for right side of website
#rightbody {
position: relative;
float: left;
width: 75%;
}
when i delete width: 75%, the width of table is the same as the parents div but that width is important
Try putting
table-layout:fixed
to your table's css. I had almost the same problem before and it worked for me.
Hope this helps.
Related
I have set on my site a 100% width on a div. It doesn't work for that section. Please look at my site.
http://patwoj.hekko24.pl/esportowy/
The nav on the top of the site with the games names (black one) should be 100% width.
What's wrong?
Change the margin-left to padding-left and add a width 100% in your site-content class.
.site-content {
padding-left: 300px;
display: block;
float: left;
width: 100%;
}
I not clear with your problem but make sure The header is not inside the page div .Move the header outside of that div. and you need to manipulate your margin.
Because in this page there are two main div's |
-Sidebar width 30%
-Content width 70%
And your menu is in Content div that's why menu 100% width means 70% width of Content div.You have to takeout menu div from Content Div and place it in start of Page div.
Change this css. Remove margin-left:300px and use width:100% on site-content class.
.site-content {
display: block;
float: left;
width: 100%;
}
Ok so I am making my first iOS HTML5 app and it is just a simple quote app. I need to figure out how to make my container div be the full height of the iphone. Here is a jsfiddle of my design - http://jsfiddle.net/gKaDL/1/
.container {
width: 640px;
min-height: 100%;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
}
Because a lot of the quotes are short the container div will not reach the iPhone 4 screen height of 960px let alone the iPhone 5's 1136px height. The container div must be the size of the screen or larger as there is a background image on it that must fill the screen.
Thanks.
You have either the CSS unit vh that is in centieth of viewport height. In which case you would write:
height: 100vh;
Or you can force the div to stick to top and bottom of the closest positioned parent (so give position:relative or position: absolute to a parent that has the appropriate height):
position: absolute;
top: 0;
bottom: 0;
tell me if you need more details
div{
margin:0px auto;
width:100%;
height:100%;
}
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer
I have a website with two columns, within a wrapper div.
The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100%.
Here's my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.
If I set the height of the column with images (#rightbox) to a specific height in pixels, this happens.
I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.
How can I make the two columns have the same height?
EDIT: I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper.
You cannot define height as 100% unless your parents provides an actual heights.
#wrapper {
height: 800px;
}
/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
height: 100%;
overflow: auto;
}
Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } before the wrapper can be set to 100%
Given the limited amount of code provided... here is a pure css solution.
http://jsfiddle.net/rlemon/Q7MvS/
.wrapper {
height: 600px;
width: 800px;
}
.panel {
float: left;
width: 400px;
height: 100%;
}
.panel.right {
overflow: scroll;
}