I want this design:
DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
How do I solve this problem? I've tried stuff like floating left & right, but I just can't get them on the same line.
I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.
My code:
<style="text/css">
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
</style>
and
<div id="mainbulk">
<div id="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
<div id="ads" align="right">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
</div>
I'm encountering this problem:
http://www.screencast-o-matic.com/watch/c6lrXsXyQ
Try the following. ids are used for unique content and should be used once only per page.
Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).
<html>
<head>
<style type="text/css">
.textcontent {
float: left;
border: 1px solid red;
width: 700px;
margin-bottom: 4px;
}
.ads {
float: left;
width: 120px;
border: 1px solid green;
}
.textcontent:before {
clear: left;
}
</style>
</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
</body>
</html>
Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.
HTML:
<div class="mainbulk">
<div class="ads">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
<div class="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
</div>
CSS:
.mainbulk {
padding: 1.5em 2% 1.5em .5em;
border: 1px solid #000;
}
.ads {
width: 7.5em;
float:right;
text-align: right;
border: 1px dotted #f00;
}
.textcontent {
max-width: 40em;
float: right;
border: 1px dotted #00f;
}
I believe I can help!
What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.
Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.
What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.
The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.
There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .
This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!
Related
I am trying to add a div above my content div with the same width.
I would like it to only push down the content div, but it causes the sidebar div to move down as well.
<div id="container">
<div id="new-div">new div</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
.
#container {
background: lightgrey;
width: 500px
}
#new-div {
background: darkred;
width: 300px
}
#content {
background: lightblue;
width: 300px;
height: 400px;
display: inline-block
}
#sidebar {
background: darkgreen;
width: 100px;
height: 400px;
float: right;
}
http://jsfiddle.net/zd9omqa7/2/
How can I avoid the sidebar div to move down? I would like it to always float in the right top corner.
The two easiest ways that spring to mind would be to either reorder the html so your sidebar comes first in the DOM:
http://jsfiddle.net/ctaylr/xxhdn1xb/1/
<div id="container">
<div id="sidebar">sidebar</div>
<div id="new-div">new div</div>
<div id="content">content</div>
</div>
or to use position absolute to brute-force move it to the top:
http://jsfiddle.net/ctaylr/warnjgp3/2/
(remember to position the container div relative for this to work)
Otherwise, you could look to wrap your left hand side "divs" in a container of its own.
Hope this helps!
Some html:
<div style="height: 300px">
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
I want my inner div height to be not greater than parent div's and if it is greater then content div should have scroll, but if it is smaller it should be the same size with it's content.
I've tried to set inner's max_height=100%, but I can't make my content have scroll.
I want to do it without js
UPD: I do not know main div's height (300px is not constant)
UPD2: My main div has "max-height: 100%", so I do not know exact value
Demo:
http://jsfiddle.net/kzfRk/7/
Not sure I understand, but if your scroll bars are not appearing try:
#inner{overflow-y:scroll;}
Is this what you had in mind? (colours are just for ease of viewing) See live here.
css
.container{
height: 300px;
overflow: hidden;
border: 1px solid #000;
}
#inner{
max-height:300px;
overflow-y: auto; border: 1px solid #f00;
}
#title{ background-color: #eed;}
#content{background-color: #fee;}
html
<div class='container'>
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
Do you have a live example? It's difficult to work out what you are trying to do.
Do you want the parent div to fill the screen and the content to scroll withing it? If so, give your parent div a height of 100% and try applying the following style to your inner div:
height:100%; min-height: 100%; overflow:auto;
You set your height then use overflow to control the scrolling.
#inner{max-height:100%;overflow-y:scroll;}
Example: http://jsfiddle.net/calder12/drC3L/ Change the size of the outer div to anything you want, if there is too much content the inner div will scroll.
You need to set the inner div maximum height the same as the root div height. Using your fiddle, copy and paste the CSS below into your CSS file and it will work...
.container{
max-height: 100%;
border: 1px solid #000;
}
.inner{
max-height: 100px;
overflow-y: auto; border: 1px solid #f00;
}
.root{
height: 100px;
border: 1px solid;
}
I have two divs in my page: leftpart and rightpart which has the following css:
.leftpart{
width:280px;
background:#0054a6;
color:#fff;
padding-top:40px;
height:100%;
min-height:637px;
box-shadow:3px 3px 10px #bebebe;
position:relative;
}
.rightpart{
width:75%;
padding-left:10px;
}
I want this sidebar(leftpart) till the end of my page(till the bottom). I've set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
If you want to try this in CSS you could try the negative margins trick.
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
SIDEBAR
</div>
<div class="col2">
CONTENT
</div>
</div>
Ok, this is driving me nuts!!
I want three div or span tags in a line. Left = a 57px width image; Right = a 57px image; Centre = A span image to fill the whole width.
<div class="bar-left"></div>
<div class="bar-span"></div>
<div class="bar-right"></div>
Basically I'm drawing a fancy hr line where each end fades out. I can get the left and right images aligned using float: left; and float: right; but the middle seems impossible.
Any ideas?
Would this be ok?
JSFiddle
The idea is to put left and right column on top and float them, then put margin to the content div so it doesn't wrap under floated ones...
<div class="bar-left"></div>
<div class="bar-right"></div>
<!- content goes in last -->
<div class="bar-span"></div>
CSS:
.bar-left
{
float: left;
width: 57px;
}
.bar-right
{
float:right;
width: 57px;
}
.bar-span
{
margin: 0 70px;
}
Put your floated divs before the non-floated ones:
<div class="bar-left" style="float: left; color: blue; background-color: blue; width: 57px;"> </div>
<div class="bar-right" style="float: right; width: 57px; background-color: blue;"> </div>
<div class="bar-span" style="background-color: green; display: block;"> </div>
traditionally, when you want to line things up like this end-to-end, you float all of them left or right.
I need to do a website with divs. See the code snippet for the format. The MENU is of variable height, depending if the menu-items is rolled out or not, and the content is of variable height as well, but with a minimum of 700px. If the MENU is folded together to its min-height, it is 300px, and the BOX should take up the remaining space so MENU+BOX is the same height as the CONTENT. The content of BOX is 600px, so when BOX only gets 400px, there should be scrollbars. When the CONTENT div expands, the BOX should expand as well, so they stay the same height.
Here's what i got so far, but it is not working properly. I've tried some other stuff, but deleted it for this post so I only get the points shown instead. Hope you can help, and thank you in advance!
#container{ width: 800px; }
#leftbar{ float: left; width: 250px; background-color: lightgray; }
#content { float: left; width: 550px; background-color: white; }
#menu { width: 250px; }
#box { width: 250px; height: 300px; overflow-y: scroll; }
<div id="container">
<div id="leftbar">
<div id="menu">
<div id="box">
</div>
<div id="content"></div>
</div>
<div style="clear:both;"></div>
hi at the first look i can see you have some unclosed div tags, and probably that's why it doesn't do what you want. You can assign scroll bars by using java script, if you set overflow from the css it will have a scroll bar from the beginning