I am newbiew to css.
Please have a look of this simple two column layout first.
http://www.vanseodesign.com/blog/demo/2-col-css.html
I want to ask why the width of content + width of sidebar =/= width of container?
Width of content = 610px
Width of padding in content = 5+5 = 10px
Total width of content = 620px
Similarly Total width of sidebar with padding = 340px
So total content and sidebar = 620+340 = 960px which is equal to width of container !
The W3C specification says that the width of a box is: margin + border + padding + width. In this way you'll be able to determine the actual box width.
If you sum the resulting box widths you will have a result equal to the container width.
Without seeing your code it's hard to give you an answer. But some basic CSS and html is below which will give you a content area the same size as your header, see it in action here http://jsfiddle.net/peter/wZQNY/
The CSS
.container{
margin:0 auto;
width:960px;
}
.header{
width:100%;
background:#eee;
}
.content{
width:100%;
background:#ccc;
}
The HTML
<div class="container">
<div class="header">header navigation</div>
<div class="content">page content</div>
</div>
I can't see the problem. In your link, the content.width + sidebar.width == container.width
What's your problem? what browser are you using?
A possible solution is that you may have some weird behavior due to border or margins, for that, you should apply a CSS Reset.
Related
Below I have my code. How to use the height in %
<div class="container" >
<div class="row">
<div class="col-" id="t1"></div>
</div>
</div>
Css
body{
background-color:aquamarine;
}
#t1{
height:100%;
border:1px solid brown;
}
When I use height:100px; It works fine but when I use height:100%; It doesn't work.
How to give the height in percentage using bootstrap for each div?
You can try adding something like style="min-height: 70vh;
"vh" stands for viewport height. So, "70vh" means 70% of the viewport height.
Here are a few other ways to control the height using Bootstrap classes:
https://getbootstrap.com/docs/4.0/utilities/sizing/
You probably don't want to use vh because that is based on the viewport of the device and you look like you are wanting to base this on a parent container. height is based on the height of the parent element. When you say height:100%; you should think, "100% of what?". That would be the height of the parent.
So give the parent a height in some unit value like px or em or even vh.
Now this can get really tricky at times so reading the CSS spec is always recommended.
I want to have a header with 100% width,
in some cases there is a horizontal scrollbar and that
causes the div to cover the visible area and not the whole
parent element.
.cont {
width: 100%;
}
http://jsfiddle.net/BhRdV/1/
There are certain cases, where even if you don't set width to DIV, it will still scale 100%.
Also, please be clear with ur question.
<div style="width:1200px;">
<div style="width:100%;">Tadda</div>
<div>Tadda 2</div>
</div>
I need to have two inline divs, the left div should be fluid and the right should be fixed. The minimum width for the left fluid column should be 801px and the maximum width for the left div should be 1250px. The right fixed div width should always be an exact 250px.
Can someone please show me how to do this? If the body width is 1500px for example, the left fluid div should grow and push the right div out to 1250px and stop. If the body content is 801px then the left div should be around 550px.
I've already asked this question but wasn't able to get anything that worked.
.intro {
float:left;
height:200px;
width:100%;
padding:10px 0;
}
.intro-right,
.intro-left{
display:inline;
}
.intro-right {
float:left;
width:250px;
margin-right:20px;
height:200px;
}
.intro-left {
min-width:801px;
max-width:1250px;
height:200px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>Test</p>
</div>
<div class="intro-right">right fixed</div>
</div>
try with javascript in a way that will look not too bad on page load
for example you hide right-intro, with left set to 100%,
on load calculate the size for left make appear right from the right while decreasing left + a fallback if no javascript with fixed width for both
NB: add a window resize event listener
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}
I want to make a website that fills the pagewidth to 100% for all widths (available space) lower or equal to 1280px and for all widths greater than 1280 two filling side bars should appear (like this: |fill|website|fill|).
(How) can i do this without scripts? (by using css settings?)
You could use something like this:
#content {
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
That refers to the style applied to a div that has all the page's contents.
Your "sidebars" would be whatever the background body is.
Do you want content in the "fill" bits, or just a border type thing? If just a border, you can use a background image/colour to make the fill effect, and use max-width on the main content bit. Be aware that it won't work in IE6, if that's important to you.
<div style="max-width: (bar width * 2) + 1280">
<div style="max-width: 1280px">
<!-- content -->
</div>
</div>