kind of embarrassing to ask but I have been toying with it for the past 1 hour at least and cannot get it correctly.
Need 2 div layout.
Div 1 floated left with a fixed width of 75px
Div 2 floated right with a fixed width of 900px
Now the problem: the margin between div1-div2 and div2-right outer edge needs to be equal.
Try putting "div 2" in a container that isn't floated. Then remove "div 2"'s float and instead use display:inline-block. Add text-align:center to the new container of "div 2".
HTML:
<div class="div1"></div>
<div class="container">
<div class="div2"></div>
</div>
CSS:
.div1{
float:left;
width:75px;
height:100px;
background-color:red;
}
.container{
padding-left:75px;
}
.div2{
margin:auto;
width:500px;
background-color:blue;
height:100px;
}
DEMO
Related
I have a container div and a content div.
markup:
<div id="container">
<div id="content">
<pre>
some <br/>
content <br/> of variable height.
</pre>
</div>
</div>
css:
#container {display:table; border:solid red 2px; width:400px; height:500px; background-color:#aaa;}
#content {display:table-cell; height:200px; width:200px; vertical-align:middle; background-color:#444}
I want to vertically align the content div, but not have it take the complete height of the container div.
Now I see other solutions for this, the ones that use 3 div's - outer, middle, inner- I don't want to do that- just 2 divs.
While the above thing works- the height of the content div is ignored- possibly because of the table-cell display value, and it fills the entire container div. How to rectify this??
Remove the display:table-cell css from your #content id css selector, then the 200 height is respected. And you have a typo in your height: 200px width:200px there is no semi-colon separating the two values, so the width is not getting applied.
#container {
display:table;
border:solid red 2px;
width:400px;
height:500px;
background-color:#aaa;
}
#content {
/*display:table-cell;*/
height:200px;
width:200px;
vertical-align:middle;
background-color:#444
}
<div id="container">
<div id="content"> <pre>
some <br/>
content <br/> of variable height.
</pre>
</div>
</div>
I have some floated divs in a wrapper, they should be side buy side and a fixed width. However as together the child divs are wider than the parent div this has been set to overflow:hidden;
My problem is I have to set the width of the parent div to accommodate the combined width of the child divs otherwise they are pushed onto a new line by the lack of available width.
I would like to not have to set the width of the wrapper div if possible as the child divs will be added dynamically.
Css:
.shell{
width:900px;
}
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
width:1000px;
}
.cont{
width:500px;
float:left;
position: relative;
}
Html:
<div class="shell">
<div class="wrap">
<div class="cont">
</div>
<div class="cont">
</div>
</div>
</div>
Note: The relative:position; must be kept for other reasons.
.wrap{
overflow:hidden;
height:120px;
margin-top:35px;
min-width:1000px;
width:auto;
}
if you want to view them side by side , then you should consider using inline-block
that is why we use min-width , just to initiate a width
I have 3 divs. The 'middle' div needs to be centered in the containing element (a seperate div that is the width of the page, basically) while the other two divs should be on either side of the 'middle' div.
Here is what I've tried so far, but as you can see, if the left and right divs aren't even in width, they push the 'middle' div off center.
<div class='cont'>
<div class='name2'>The Man with Six Fingers</div>
<div class='vs'>VS.</div>
<div class='name1'>I. Montoya</div>
</div>
.cont{
position:fixed;
top:0px;
width:100%;
background-color:red;
text-align:center;
}
.cont >div{
display:inline-block;
}
http://jsfiddle.net/7TLSa/
The solution only needs to work in Webkit since this will be in a mobile app.
I adjusted the widths, min-width, and white space to tweak its responsiveness. Is this what you're looking for?
See DEMO
.name1, .name2 {
width:30%;
min-width:160px;
white-space:nowrap;
}
I have a simple HTML page and it contains two divs aligned vertically. The page is scrollable because of second div. I want the first div's position to be fixed, or nonscrollable, so that only the second div is scrollable. I added position:fixed to first div's css but this time, the second div was placed on first div, so the first div disappears under the second div.
CSS
body {
width:1000px;
height:100%;
margin:0 auto;/*body ortalama*/
}
#div1 {
height:300px;
background-color:#00CC66;
}
#div2 {
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
}
HTML
<div>
<div id="div1"></div>
<div id="div2">
<p>
<!--Content Here-->
</p>
</div>
</div>
Fixed is always relative to the parent window, never an element. Once the position is set to fixed its taken out of the document flow.
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
so in the second div2 add these
position:relative;
top:300px; /*Bump it down by the height of div1;*/
Hope it helps;
You should add a height and set overflow auto instead of scroll because with scroll you will have the scrollbar always even if the content is less than the specified height. For example:
#div2 {
background-color: #FFFF33;
display: block;
font-size: 72px;
height: 200px;
overflow: auto;
padding: 30px;
word-wrap: break-word;
}
Add this css to #div2 (you'll need to specify a height for #div2 otherwise the the scroll bar won't know where to start):
overflow-y:auto;
height:50px;
See the example here: http://jsfiddle.net/38xkn/1/ (scroll to the right first as you've set the body width to 100px, then you'll see the scroll bar for #div2).
Okay, here is another option. It's layout is somewhat different but it should get the job done. It uses absolute positioning on div1 to get it to the top, and a percentage width to stop it covering the scroll bar for div2. It's not perfect so you may need to tweek it slightly.
HTML
<body>
<div>
<div id="div1">a</div>
<div id="div2">
<p> SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</div>
</div>
</body>
CSS:
body{
width:100%;
height:100%;
margin:0 auto;/*body ortalama*/
overflow:hidden;
}
#div1{
height:300px;
background-color:#00CC66;
position:absolute;
top:0;
width:97.5%;
}
#div2{
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
overflow-y:auto;
max-height:50px;
padding-top:300px;
}
EXAMPLE:
http://jsfiddle.net/38xkn/6/
So I got some divs... The aim here is to play with some hide-show effects.
<div class="container">
<div class="move">
Some dynamic content...
</div>
</div>
.container {
width:100px;
height:100%;
owerflow-y:hidden;
}
.move {
width:300px;
height:100%;
float:right;
}
The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?
Thanks.
It is because your containers width is less than the contents.
ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.
You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).