I have 2 div in on page
<div id="main"></div>
<div id="panel"></div>
and using float to make main at left, and panel at right
#photos-main {
float: left;
width: 800px;
position: relative;
}
#panel {
float: left;
margin-left: 830px;
position: absolute;
}
I want to let panel fill with the left page space, which css should I use?
Just don't float it, and make it relatively positioned. Take out the margin as well. Floating "main" means that it will simply be to the left of "panel" all the time. If you define "main" how you want, "panel" will automatically take up the remaining space.
#photos-main {
float: left;
width: 800px;
position: relative;
}
#panel {
}
Looks like you're trying to build some layout, right? If that's the case, consider implementing (hence learning from) some of the techniques presented in these links:
40 Tutorials and tips about CSS Layouts
CSS Positioning
The perfect three columns layout
Hope it helps!
You could do it with floating with this approach:
#photos-main {
float: left;
width: 800px;
}
#panel {
float: right; /*to have the panel on the right side*/
width: 100px; /*with a width of 100px*/
}
Then you have to wrap the two Tags with another , which get a total width of both elements.
To clarify this two column layout and put e.g. a footer beneath, put another in your HTML-Structure and set into the css simple a "clear:both;", so the floating will be stopped.
Complete Sample
HTML
<div id="wrap">
<div id="photos-main"></div>
<div id="panel"></div>
<div id="clear"></div>
</div>
CSS
#wrap {
width: 900px;
}
#photos-main {
float: left;
width: 800px;
}
#panel {
float: right; /*to have the panel on the right side*/
width: 100px; /*with a width of 100px*/
}
#clear {
clear:both;
}
Related
I have this html:
<div class="container">
<div id="sidebar">
<ul>Create Offer</ul>
<ul>Accept Offer</ul>
<ul>Pending</ul>
<ul>Completed</ul>
<ul>Balance</ul>
<ul>Support</ul>
</div>
<div id="items">
Text
</div>
</div>
this is the css:
.container {
margin: 0 auto;
background-color: white;
border: 1px solid black;
width: 1000px;
}
#sidebar {
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
.container #items {
width: 82%;
float: right;
background-color: red;
}
output: http://puu.sh/l719c/52f182e1d2.png
why wont the items div show within the container in the white space next to the sidebar?
thanks.
When you float an element, it moves to the side and lets content that follows it move up beside it.
That means the content that follows items (if there was any) would be next to it.
You've done nothing to let items move up beside sidebar.
You need to float sidebar left and not items right.
Also beware of horizontal margins/padding making the total width of the elements add up to more than 100%.
Also note that floated elements do not restrict the height of their container unless you do something about it.
I'd generally look to flexbox for aligning blocks on a row, rather than floats.
You have just missed one line. The float for the sidebar must be set so that other elements can use the empty space. Change your css for #sidebar as follows.
#sidebar {
float: left;
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
I'm assuming you want your sidebar set to float:left;. So you can position the "items" right next to the "sidebar" div.
I have the following:
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
/* ???? */
}
I'm trying to make it so the clickable box will be centered inside the inner container IF there isn't enough room for another clickable box next to it.
BUT if there is enough width (600px +) then they create 2 columns (which are together centered inside the inner container), and if theres more room even (900px +) then 3 columns etc...
in other words, when I start out with a window of width 500px, it should show 1 column of boxes all lined up under each other. As I drag the window out, the box should stay in the center until theres enough room for another to go next to it, and they create 2 columns instead, and so on.
But I don't want the column to float left or right while I'm dragging the window and leave a big empty space
Try this CSS:
.container-main {
width: 100%;
}
.container-inner {
width: 99%;
text-align:center
}
.clickable-box {
display: inline-block;
width: 32%;
margin: 0 auto;
}
I think what you're looking for is to set clickable-box to display: inline-block. Setting display: inline-block essentially makes the div act like text in regards to text-align rules, but still keeps some block properties as well. It's pretty sweet.
HTML
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
CSS
.container-main {
background-color: red;
text-align: center;
}
.container-inner {
width: 90%;
}
.clickable-box {
background-color: blue;
width: 300px;
display: inline-block;
}
Here's a fiddle to demo it!
display:inline-block should be the best solution, this will display clickable boxes in one line if there is space for them:
.clickable-box {
width: 300px;
height: 300px;
display:inline-block;
}
Also add text-align:center to parent div in order for clickable boxes to be centered
.container-inner {
width: 90%;
text-align:center;
}
I think this should do it. I modified the CSS a bit to add some borders to see what the boxes look like. You could certainly remove those borders.
Fiddle Demo
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
border:3px solid #454;
text-align:center;
}
.clickable-box {
width: 300px;
height: 300px;
border:1px solid #000;
margin:0 auto;
display:inline-block;
}
I'd use float rules because they can push down the boxes that do not fit. For instance, float:left will get you at least two boxes on a 1096px. display:inline might have issues on browser rendering.
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
float:left; // right there.
}
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
I'm currently creating a website, which has a centered box with text and and such.
Now, i also want a box floating on the right, with a little gap from my main box.
I'll leave a picture here, where the red box i drew is the floating box i want to make.
Btw. the blue box is just a censored box i didn't want on the picture.
So my question for you is, how do i make a floating box like that?
I've tried a couple of times with different methods.
in the CSS, i've made a box and gave it the property float:right;
But when i do that, it just turns out like this
Any help will be greatly appreciated
DEMO
You can keep an element center align by defining its width then using margin: 0 auto; technique. this will make sure your center div is in center then you can use position: absolute to create the other box on offset position.
HTML:
<div class="main-wrapper">
<div class="main">This is in center position.</div>
<div class="side">This is in offset position.</div>
</div>
CSS:
body {
background: #333;
color: #fff;
}
.main-wrapper {
position: relative;
margin: 0 auto;
}
.main, .main-wrapper {
width: 500px;
}
.main {
border: 1px solid #f00;
min-height: 500px;
}
.side {
width: 200px;
border: 1px solid #f00;
min-height: 200px;
position: absolute;
top: 60px;
right: -300px;
}
.main, .side {
text-align: center;
padding: 10px;
}
My best guess is that you have a <div> with a float: right; in the end. Keep it in the first code. So that it gets floated correctly. I would code this way:
<div class="right">Right</div>
<div class="main">
Main Contents
</div>
CSS would be:
.right {float: right; width: 20%;}
.main {margin: auto; width: 60%;}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/8WHyp/
U can have main container display : inline-block
width of each sub container as width : 30%;
and width of the floating box which is inside 3rd sub container as
width : 100%;
In case u dont need first div,
put some margin for the 2nd container
ex .. margin-left : 300px;
and in case u dont want ur floating box width to be 100% of the 3rd container, u can adjust it too
I have gotten the assignment to code a website from tables to CSS. While this is easy I have one question on how to recreate one of the site's biggest detail.
Site is: www.optimizer.dk.
How can I recreate the labels coming out of the left side, while still having the content in the middle?
Rest of the site is no worries.
Is the solution to:
padding-left: 200000px;
margin-left: -200000px;
To fake the expansion to the left?
I would possibly do it like this:
Live Demo
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden
}
body {
background: #eee
}
#container {
width: 300px;
margin: 0 auto;
background: #bbb;
}
li, li span {
height: 25px;
}
li {
position: relative;
width: 200px;
background: #777
}
li span {
display: block;
position: absolute;
width: 9999px;
left: -9999px;
top: 0;
background: url(http://dummyimage.com/50x30/f0f/fff)
}
HTML:
<div id="container">
<ul>
<li><span></span>Menu Item</li>
</ul>
<div id="content">
Hi!
</div>
</div>
This answer was based on an older answer I wrote: 'Stretching' a div to the edge of a browser
Ideally here you would want a fluid width. See: http://jsfiddle.net/cbNvn/1/
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
div {
float: left;
}
#left {
width: 25%;
text-align: right;
}
#center {
width: 50%;
}
#right {
width: 25%;
}
Expanding the page would expand the left column and the background image can repeat. The linked images can lay over the background as they do currently. The text-align:right attribute will keep the linked images on the right.
You need 3 divs with float:left to create the 3 columns
i would put it all in a div and set position:absolute;. then put your buttons in there own divs so you can move them.
or
put it all in a div and set the margin to -5%(mite need to play with this into it works). then make the image the background and put you text buttons in there own div's so you can move then to where you want them.
Then use float:left; to line them up