I have this simple website
<div style=" position: relative; margin-right: 40px;">
<div style="float: left; width: 100px; position: relative;">Middle Stuff</div>
<div style="float: right; width: 200px; position: relative; margin-right: 40px;">Right Stuff</div>
<br style="clear: left;" />
</div>
and I want that the middle stuff-box-width grow up when I resize the window so that between the middle stuff-box and the right stuff-box is no empty content.
How can I get this "effect"?
As mentioned in the comments, you can achieve this with percentage widths. Be carful though, if you leave your margins at fixed widths then the layout can break.
<div style=" position: relative; margin-right: 40px;">
<div style="float: left; width: 58%; position: relative; margin-right:2%;" class="middle-div">Middle Stuff</div>
<div style="float: right; width: 38%; position: relative; margin-right: 2%;" class="right-div">Right Stuff</div>
<br style="clear: left;" />
</div>
Here's a Fiddle
Also, you should really try to avoid using inline styles like this. Instead, I'd recommend something along the lines of:
/* CSS in style.css */
.parent-div {
position: relative;
margin-right: 40%;
}
.middle-div, .right-div {
position: relative;
float: left;
}
.middle-div {
width: 58%;
margin-right: 2%;
}
.right-div {
width: 38%;
margin-right: 2%;
}
Then your markup can be reduced to:
<div class="parent-div">
<div class="middle-div">Middle DIV</div>
<div class="right-div">Right DIV</div>
<br style="clear: left;" />
</div>
<div style="position: relative; margin-right: 40px; width: 100%;">
<div style="float: left; width: 60%; position: relative; border: 1px solid #000;">Middle Stuff</div>
<div style="float: left; width: 200px; position: relative; margin-right: 40px;margin-left: 10px; border: 1px solid #000;">Right Stuff</div>
<br style="clear: left;" />
</div>
Try this you will get a fix size for second box as 200px while 60% for first box.
As per your image you need left column fluid and right one fixed: Demo
<div id="outerdiv">
<div id="right">Right Stuff</div>
<div id="left">Middle Stuff</div>
</div>
#outerdiv {
position: relative;
margin-right: 40px;
width: 100%;
}
#left {
float: left;
width: 55%;
position: relative;
border: 1px solid #000;
}
#right {
float: right;
width: 30%;
position: relative;
margin-right: 40px;
border: 1px solid #000;
}
Or you can use responsive grid system like this
demo
Related
I have two elements where one of them is floated to left and other is floated to right and its content is textarea element. Their width is set to 30% and 60%. It looks ok, but when I resize textarea, parent element resizes in strange way. Textarea goes beyond parent.
Here's a simple example:
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
JSFiddle
What is the reason of that strange behavior and what can I do to fix it without modifying HTML code?
Solution: 1
You can set max-width: 100% to textarea so that it will not go beyond the div
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
.right textarea {
max-width: 100%;
}
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
Solution: 2
You can set resize: none; to teaxtarea so that it can't be resized. You can add height and width of the textarea as per your requirement
.wrapper {
border: 3px double gray;
display: inline-block;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
.right textarea {
max-width: 100%;
resize: none;
}
<div class="wrapper">
<div class="left">
<label>Label</label>
</div>
<div class="right">
<textarea></textarea>
</div>
<div style="clear: both;">
</div>
</div>
https://jsfiddle.net/0Lq3ks4g/50/
.wrapper {
border: 3px double gray;
min-width: 300px;
overflow: visible;
padding: 5px;
}
.left {
float: left;
text-align: right;
width: 30%;
}
.right {
float: right;
width: 60%;
}
Try removing display:inline-block from .wrapper. Then parent will also expand when textarea expands
I use inside of div tag, 4 div tags to divide to 4 equal areas using following tag.
Is there any other way to divide or improve this division
<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;">
<div style="width: 336px; height: 251px; display: inline-block; float: left;">
</div>
<div style="width: 336px; height: 251px">
</div>
<div style="width: 336px; height: 251px; display: inline-block; float: left;">
</div>
<div style="width: 336px; height: 251px">
</div>
</div>
Use <div style="width: 50%; height: 50%"> for inner divs.
There are no other improvements i can suggest you about styles.
In the other hand, if you want to see divs while designing, i can suggest you to assign them temporary background colors like:
<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;background-color:gray">
<div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:yellow">
</div>
<div style="width: 50%; height: 50%;background-color:red;float: left">
</div>
<div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:green">
</div>
<div style="width: 50%; height: 50%;background-color:blue;float:left">
</div>
</div>
EDIT: Thanks to background colors, i realised that your floating divs hide other ones. You should add float:left for all inner divs.
Is this your desired effect?
.container {
display: flex;
height: 300px;
}
.container div {
flex: 1;
}
<div class="container">
<div style="background:red">A</div>
<div style="background:blue">B</div>
<div style="background:lime">C</div>
<div style="background:cyan">D</div>
</div>
Or is this?
.container {
height: 300px;
width: 300px;
}
.container div {
width: 50%;
height: 50%;
float: left;
}
<div class="container">
<div style="background:red">A</div>
<div style="background:blue">B</div>
<div style="background:lime">C</div>
<div style="background:cyan">D</div>
</div>
I am trying to achieve the following:
The DIVS are divided in three section and once reaching a certain screen size, I want them to stack on top of another using Media Queries.
Here is the HTML (disregard inline CSS, i will be moving it to a file once I have it working):
<div class="col span_1_of_3" style="height: 150px;">
<div class="test2n" style="height: 100%;">
<div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"><img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>
<div style="float: left; display: inline-block; width: 58%; height: 100%;">
<div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;">How we can better develop</div>
<div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">TThis DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
</div>
</div>
</div>
<div class="col span_1_of_3" style="height: 150px;">
<div class="test2n" style="height: 100%;">
<div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"><img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>
<div style="float: left; display: inline-block; width: 58%; height: 100%;">
<div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;">How we can better develop</div>
<div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">TThis DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
</div>
</div>
</div>
<div class="col span_1_of_3" style="height: 150px;">
<div class="test2n" style="height: 100%;">
<div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"><img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>
<div style="float: left; display: inline-block; width: 58%; height: 100%;">
<div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;">How we can better develop</div>
<div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">TThis DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
</div>
</div>
</div>
CSS:
.imgArtThumb
{
width: 155px;
height: 100px;
}
.test2n
{
text-align: left;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
.test2 p, .test2n p
{
text-align: left;
}
/* COLUMN SETUP */
.col {
display: block;
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
#media only screen and (max-width: 825px) {
.col {
margin: 1% 0 1% 0%;
}
}
#media only screen and (max-width: 825px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 98%;
}
}
Here is the JSFiddle: http://jsfiddle.net/ofrj55j4/1/
Updated JSFiddle with max-width set to 90%: http://jsfiddle.net/ofrj55j4/6/
How to I make it so that the image is centered on the left vertically and the top right title link should take up 50% and the description on bottom right take up 50%. For the description I would like to have the ellipses if it exceeds the dimension.
UPDATE: I got everything working except the ellipses. Why doesn't fill out the entire DIV before using the ellipses? JSFiddle: http://jsfiddle.net/ofrj55j4/19/
Maybe it is just a typo you entered here on the site...your divs that contain the image are set to displat: inline-block instead of display
To get an image to stack on top of each other you have to specify it by removing the floats.
Using "clear:both;" will remove the floats will stack them, and then you can adjust the size using margins, padding, width, and height to get a perfect box.
I'm trying to center some text in a div horizontally.
CSS:
#parent {
background-color: #eee;
height: 48px;
text-align: center;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
float: left;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
float: right;
}
HTML:
<div id="parent" style="width:100%">
<div id="colLeft">left left left left</div>
Title
<div id="colRight">right</div>
</div>
<div style="width:100%; text-align:center">
Title - this one is really centered.
</div>
But it the text "Title" appears to get centered taking into account the space that #colLeft consumes, so it's not really centered with respect to the browser width.
Is there a way that I can truly center the text, no matter how much space #colLeft takes up?
It's not really recommended, but you could do something like this JS Fiddle.
#parent {
background-color: #eee;
height: 48px;
text-align: center;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
float: left;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
float: right;
}
.title{
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
}
<div id="parent" style="width:100%">
<div id="colLeft">left left left left</div>
<div class="title">Title</div>
<div id="colRight">right</div>
</div>
<div style="width:100%; text-align:center">Title - this one is really centered.</div>
You make the title position:absolute. Give it a width. left: 50%. margin-left: minus half of the width. It will stay center. But I wouldn't really recommend doing this...
if you surround Title with a div like this:
<div style="position: absolute;left: 50%">Title</div>
You're good in Webkit.
<div align="left" style="border:5px solid white; text-align:center; position:relative">
<div align="left" style="border:4px solid brown; float:left; width:100px; position:absolute"><span>left</span></div>
<div align="left" style="border:4px solid brown; right:0; width:200px; position:absolute"><span>right</span></div>
<span>really centered</span></div>
Trying to do simple header for website, [image][text][splitted horizontal section]:
<div style="width: 930px;">
<div style="width: 280px; height: 80px; display: inline; background-color: red;">image</a></div>
<div style="width: 400px; height: 80px; display: inline; background-color: blue;">text</div>
<div style="width: 250px; height: 80px; display: inline; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>
What I see in VS2010 and IE8:
What I see in Chrome and FireFox:
Why? And how to fix it? I need the first variant of course.
Add float: left to your inline elements.
http://jsfiddle.net/tmKaU/1/
I think this is what you are looking for:
<div style="width: 930px;">
<div style="display: block; float:left; width: 280px; height: 80px; background-color: red;">image</a></div>
<div style="display: block; float:left; width: 400px; height: 80px; display: block; background-color: blue;">text</div>
<div style="display: block; float:right; width: 250px; height: 80px; display: block; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>