How to achieve the following with CSS?
--------------------------------------------------
| DIV 1: 50px | DIV 2: FLUID | DIV 3: 50px |
--------------------------------------------------
I don't have an issue with a 2 columns layout having the right div fluid, but i can't figure out how to make the above.
Demo: http://jsfiddle.net/SKsmJ/
<div style="float:right;width:50px;"></div>
<div style="float:left;width:50px;"></div>
<div style="margin:0 55px;"></div>
It's not the nicest solution, but you could use nested divs, set the main div's width to whatever you want for your page's width and position the other two with float.
HTML:
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
main
</div>
CSS:
div {
display: block;
}
#main {
width: 100%;
}
#left, #right {
width: 50px;
}
#left {
float: left;
}
#right {
float: right;
}
Here's a working example: http://jsfiddle.net/davehauser/6qVwR/
All you have to do is to float both the right and left div, making sure you're right div is the first in the HTML.
I edited the jsfiddle you provided : http://jsfiddle.net/AsKGL/
You just need to float: left all divs, specifying width:50px for the first and last div.
Here's a super basic jsFiddle: http://jsfiddle.net/Simo990/V3PtW/1
Related
http://optimalpages.de/DrupalMusi/
How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?
Thanks!
Actually you are floating only elements to the left without any wrapper element, so what happens is this..
Instead, wrap the other 2 elements inside a wrapper element and than float it to the left
.left_wrap {
float: left;
width: 30%;
}
.right_wrap {
float: left;
width: 70%;
}
.right_wrap > div {
border: 3px solid #ff0;
height: 100px;
}
<div class="main">
<div class="left_wrap">
Hello
</div>
<div class="right_wrap">
World
<div></div>
<div></div>
</div>
</div>
Demo
Better Demo
If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.
Demo
Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like
.clear:after {
content: "";
clear: both;
display: table;
}
And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now
<div class="main clear">
<!-- Floated Elements -->
</div>
I'm not quite sure if this is what you mean but try:
#node-29{
float: right;
clear: left;
margin-left: 0;
}
This will position the div's next to each other and keep the main content to the right.
This can be quite complex depending on your existing theme.
I wrote this page a while back to shows you how you can do that.
http://linux.m2osw.com/3columns
More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.
To make it simpler you can set a specific width to the div and you get something like this:
div.page
{
width: 900px;
margin: 0 auto;
}
That will center the main div.
For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.
we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
background-color:yellow;
}
#main
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body >
<div id="main">
this is how we can display main div in centre
</div>
</body>
</html>
I am trying now since hours, nothing helps.
Just simple:
I have two divs with variable (dynamic) width.
Both should be side by side in a wrapper div, that has a fixed width.
Everything I try: I see leftDiv and rightDiv either floating to the left or centered, but div2 under div1.... Thanks a lot.
<div class='wrapper'>
<div class='innerWrapper'>
<div class='leftDiv'>
</div>
<div class='rightDiv'>
</div>
</div>
</div>
What is the correct css? The problem is, that it does not work to give the innerWrapper automatically the width of both divs (leftDiv and rightDiv...)...
I tried:
.wrapper {
width: 600px;
text-align: center;
}
.innerWrapper {
width: auto;
}
.leftDiv {
display: inline-block;
}
.rightDiv {
display: inline-block;
}
Use display: inline-block; on those divs ..
http://jsfiddle.net/RK6R4/
I am trying to use CSS to get a DIV to fill the remaining page width, after a fixed-width div on the left (and below a fixed-height header)
The CSS I have is:
body{margin:0;padding:0}
#header{height: 100px; background:#ccccff;}
#left {position:absolute; left:0; top:100px; width:200px; background:#ccffcc;}
#main {position:relative; left:200px; background:#ffcccc;}
The HTML is:
<div id="header">Header stuff here</div>
<div id="left">Left stuff here</div>
<div id="main">Main stuff here</div>
(head and doctype omitted here for brevity)
When it is rendered, the main div is still full page width, meaning the right-hand edge is 200px off the right edge of the browser. How can I get the main div to fill the remaining width?
(eventually I will want to put other divs inside main, and make their widths expressed in % relative to the main div)
Is this even possible?
Don't use position. Use Floats. Float the "left" div left, set its width. Give the "main" div a left-margin of the width of the left div, and set the width to auto.
#left { float: left; width: 200px;}
#main {margin-left: 201px; width: auto;}
Example here: http://jsfiddle.net/GhtHp/1/
Instead of using positioning which is considered evil, just use floats.
#left {float:left; width:200px; background:#ccffcc;}
#main {margin-left:200px; background:#ffcccc;}
DEMO
Does this accomplish what you're looking for?
HTML -
<div id="header">Header stuff here</div>
<div id="left">Left stuff here</div>
<div id="main">Main stuff here</div>
CSS -
div {
border: 1px solid black;
}
#left {
float: left;
}
Jsfiddle - http://jsfiddle.net/xzWK5/
Yes, it's easily possible with CSS calc. Unfortunately CSS calc is only supported in Chrome so far.
Here's a better way:
HTML:
<div id="header"></div>
<div id="left"></div>
<div id="main"></div>
CSS:
#header{height: 100px; width: 100%; background:#ccccff}
#main{position: absolute; left: 200px; right: 0; background:#ffcccc}
#left{width: 200px; left: 0}
Having #main exactly 200px from the left and 0px from the right gives you the full width minus #left
I have been fiddling with this issue all day now. I need to create a 3 column design where the middle div has a fixed width and the left/right divs are dynamic (responsive to the width of page). For example:
#container {
float:left;
width:100%;
}
#left {
min-width: 200px;
width: 100%;
}
#middle {
width: 250px;
}
#right {
min-width: 200px;
width: 100%;
}
HTML:
<div id="container">
<div id="left">
Left column should expand with the width of the browser - with a min-width.
</div>
<div id="middle">
Middle column with fixed width.
</div>
<div id="right">
Right column should expand with the width of the browser - with a min-width.
</div>
</div>
I have created a fiddle for this: http://jsfiddle.net/2jGAe/
Can you help me solve this styling issue?
The key is to use :
#container > div {
display: table-cell;
}
with no width on the #left and #right divs. See demo.
i have a main div has 100% width, and 2 divs in it. one has 200px width and other will be 100%-200px, i mean;
-----------------this is main div -------------
| |
| ----subdiv1---- -------------subdiv2----------|
|| | | ||
| -------------- ---------------------------- |
|-----------------------------------------------|
subdiv1 has 200 px, subdiv2's width will be rest of empty space. I search on google but couldnt find.
Here's one possible solution I hacked up using a float: left rule for the left-most div, and a margin-left rule for the right div: http://jsfiddle.net/P4xMj/
Example HTML:
<div id="container">
<div id="left">
Some content here
</div>
<div id="right">
Some more content goes over here on the right. Let's make this
content really long to see what happens when we wrap more than
one or two line's worth. Extra text to fill the void.
</div>
</div>
Example CSS (the background colors are just for visibility):
#container {
background: #FF0;
overflow: auto;
padding: 10px;
}
#left {
background: #0F0;
float: left;
width: 200px;
}
#right {
background: #F00;
margin-left: 210px;
}
You're going to want to add float:left; to your subdiv1. Here is a few lines of code that will produce what you have shown.
<div>
<div style="float:left;width:200px;background:#0F0">
SUBDIV1
</div>
<div style="background:#F00;">
SUBDIV2
</div>
</div>
In short, use float:left; on your subdiv1
You can float: left the left div, and have margin-left: 200px on the right div.
http://jsfiddle.net/SpxH9/
HTML:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS:
#container {
overflow: hidden;
}
#left {
float: left;
width: 200px;
}
#right {
margin-left: 200px;
}
There's another technique you can use, which is to replace margin-left with overflow: hidden. This is useful because you don't have to have the dimension in there twice, and it adapts to changes more easily.
For example, with 10px borders: http://jsfiddle.net/SpxH9/1/
#container {
overflow: hidden;
}
#left {
float: left;
width: 200px;
}
#right {
overflow: hidden;
}
If you try to do the same thing with the first technique I mentioned, you'll find that you have to manually calculate stuff: http://jsfiddle.net/SpxH9/2/ (and fixed: http://jsfiddle.net/SpxH9/3/)
Lastly, overflow: hidden on #container is used to contain the floats. You might wish to use clearfix instead.