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%;
}
Related
I've created the following demo to show my issue:
http://francisbaptiste.com/nov17/
Each div is 33.33% wide. Within the div is an image with 100% width. I want it to be a perfect grid of images, but the height of the div is always a little more than the height of the image.
Shouldn't the height of the div be set by the height of the image within it? So why is there that little bit of space at the bottom?
The gap is coming from the actual whitespace after the image tag. You can use this to fix it:
.card img {
display: block;
}
Fiddle
Or a more hacky solution:
.card {
font-size: 0;
}
Fiddle
I thinks the problem is the height of outer div, you cannot use auto since the browser may have some default action for the div and its inside content. Instead, I specify the percentage of height and solved the problem
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
Does that make sense to you?
say I have some text displayed on an html page, which is held in a <div> tag. The div has width: 100%. I want the text to be displayed at 3/4ths of the width of the div. So, if the divider is 1000px wide, I want the left padding of the text to be 750px. How can I do this? Thanks!
Here you have to first define the container width to 100% and then set padding to whatever % you want.
All calculations will be defined in %.
selector{
width: 100%;
padding-left: 75%;
}
div {
padding-left: 75%;
width: 100%;
}
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.
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 #main div that I'd like to fill the page between the header and footer when there is no content. When there is content, it should push the sticky footer down, which it does.
CSS:
#main {
background: transparent url("images/main-content.png") top right repeat-y;
clear: both;
overflow: hidden;
margin-top: -10px;
height: 100%;
min-height: 100%;
}
I'm not sure why this isn't working. #main inherits from #wrapper and body, so I'd think setting up 100% height and min-height of 100% would work.
Site:
http://www.dentistrywithsmiles.com
Thanks in advance for your help with this.
It's that height: auto !important; somewhere near line 146 of your CSS file.
It's overriding the 100% height of your wrapper, which isn't letting your main div grow. Since your footer has a constant height, I would try adding a padding to the wrapper to make the main content div not eat into the footer, which is what happens when you turn of the height: auto !important;.
Add display:inline-block to #main (or to #wrapper, depending on what you want to do). Items with display:block (such as a div or p tag by default) have 100% width and height that adjusts to the content.