This is my app:
http://www.aproov.com/product/meeting-demo/index.html
The container holding the widgets is a div and each widget is actually made up of a li element inside a element.
What I would like to have are 4 background columns inside the container that extend from the top of the container to the bottom and are filled in with a color. Currently, you can drag the widgets around by clicking on their header text.
I'm not sure of the best solution to add the columns. The width of each column is the width of the widget. At first, I thought maybe I could add a a div table inside the container and somehow make the element stuff just "float" on top of it. That seems kind of complex though. Another solution is to use HTML5 canvas and just draw the columns.
Any suggestions?
I would just be creating your background columns as divs with 100% height and 25% width and putting them inside a parent div that is 100% height and width, and absolutely positioned at 0,0 in your main container div. Something like:
<div id="container"> <!-- main container -->
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
#container > div {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
#container > div > div {
height: 100%;
width: 25%;
float: left;
}
Related
I would like to be able to create a div that spans the entire width of the screen. The problem is, this should work along with Weebly's design system, which places it inside a div of fixed width.
The content is created as the following:
#main-wrap {
width:100%;
}
.container {
margin: 0 auto;
width: 960px;
position: relative;
}
<div id="main-wrap">
<div class="container">
{content}
</div><!-- end container -->
</div><!-- end main-wrap -->
Inside {content} is where Weebly does its magic and puts all your stuff. I tried to directly embed some code:
.wide {
position: absolute;
left:0; right:0;
width: 100vw;
background: #aaccff;
}
<div class="wide">
Test
</div>
But this did not work, and the wide div was wider than the screen, but only starts at the same left position as the content div.
Does anyone know how to get a 100% wide div inside of the container. I could also make container 100% wide, but then all of the Weebly widgets go the full length of the screen, and its not clear how I can modify the CSS To make them have fixed width.
Thanks!
It's because of that the parent has is relative positioned. So, remove position: relative; from element .container
In this case,I had created a static footer and the element inside the div like button(which alway at the bottom),I had managed to make the height of the div bigger but found that is no efficient to used while the element inside the div was increased and expended.Is it some suggestion else to make it dynamically?thanks.
The sample output might look like this:
When you say static, do you mean a fixed position at the bottom of the window? If so then whatever your height, e.g. 20px, make that the value of the bottom-padding for the main area, then anything in the main area will be padded equally by the height of the footer and will be seen.
Here is a working model for you on JSFiddle.
In HTML, there are 2 divs, "wrapper" and "footer", like:
<div id="wrapper">
line 1 <br />
</div>
<div id="footer">
footer text
</div>
In CSS:
html, body {
height: 95%;
}
#wrapper {
min-height: 100%;
margin-bottom: -1.5em;
padding-bottom: 1em;
}
#footer {
position: absolute; !important
bottom: 0;
}
I have four div tags. One of them is .main div. The rest of the are inside .main with .sub classes. What I want is first to show 1st div tag inside .main and the rest will be placed on the right side of the first div tag but the overflow of the main div tag is hidden so that the other two div tags are not shown only the first is visible. I am trying to achieve this with this code. How can I achieve this?
.main {
width: 100%;
height: 500px;
background: red;
overflow: hidden;
}
.sub {
width: 100%;
height: 300px;
float: left;
}
.blue { background: lightblue; }
.green { background: green; }
.orange { background: orange; }
Assuming I've understood you correctly, and you want to see all three sub divs, one on the left, and two on the right, the problem is that you've set the widths to 100%, so there is no space to have them floating next to each other.
You need to set their widths so that they don't take up the full width of the container, for example they can each be 50% wide.
You also need to set the heights of the two divs on the right so that their total height is the same as the div on the left if you want them to line up.
Update:
To make it so that only the left div is visible initially, I think it's best you add another wrapper div around the the sub divs like this:
<div class="main">
<div class="wrapper">
<div class="sub blue"></div>
<div class="sub green"></div>
<div class="sub orange"></div>
</div>
</div>
With a width set to 200%.
.wrapper {
width:200%;
}
Then when you want the right hand divs to become visible, you can slide them onto the screen by repositioning the wrapper div, either with a transform, relative position, or margin setting.
Updated fiddle example
I don't know why but i have found that if you have space below the first item in this situation it won't work as expected..
so make the height of sub match then it will work:
.sub {
width: 100%;
height: 500px;
float: left;
}
http://jsfiddle.net/Ex9EC/2/
probably this is totally wrong approach though so wait for someone who knows to comment maybe?
Also I think there might be something about how the position of the outer/container div has to be set (to relative,absolute or fixed) which is why i added that but it seems to work without it too:
http://jsfiddle.net/Ex9EC/3/
I am trying to center a set of floated blocks that contain images that scale dynamically. However I am having an issue where the inline-block I am using to enter the floated blocks is not shrinking to the new size of the image. Instead it will wrap to the original size of the image, leaving a big empty space.
http://jsbin.com/ewonas/1/
body {
text-align: center;
}
.inlineblock {
background: red;
display: inline-block;
}
.constrainer {
width: 20%;
float: left;
}
.constrainer img {
width: 100%;
}
<body>
<div class="inlineblock">
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
</div>
</body>
Can somebody please help me fix this issue?
Thanks
You are setting the width of the two .constrainer divs to 20%. What this means is that the width is 20% of the parent .inlineblock. So when you have to two of them that adds up to 40% of the parent. That means you have 60% remaining, or space for another 3 .constrainer divs.
To make the .inlineblock element shrink down, you would need to set the width of the .constrainer divs to a number independent of its parent e.g. a fixed width like 300px instead of a percentage.
Live example: http://jsbin.com/ewonas/6
Attempt #3.
Using css, with a strict doctype, can someone please draw 4 div boxes to meet these requirements.
The wrapper or outermost div will scale in height. That means that it could be any height.
The middle div should always be 100% high to match the outer/parent div (#1 in my list)
The next div should be positioned inside, and at the top of div #2
The last div should be positioned inside, and at the bottom of div #2
NOTES:
If you use absolute positioning for this, you will put divs 3 and 4 outside of div #1 and that won't work. The key is to keep divs 3 and 4 within div #2
<div id="wrapper">
<div id="middle">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</div>
#wrapper { height: 200px; position: relative; }
#middle { height: 100%; }
#bottom { position: absolute; bottom: 0; }
It should work for any height you give the #wrapper.
you can play with it here: http://jsfiddle.net/dmBsa/