I have the following HTML:
<div style="width:300px;background:yellow;">
<div style="float:left;border:solid 2px red;"><!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
</div>
<div style="border:solid 2px lime;float:left;"><!--Text Div-->
Banana!
</div>
<div style="clear:both;"></div>
</div>
I need to set the width of the Text Div such that it occupies the remaining width. I know this can be done by using width style attribute as width:164px;. What I needed to know is: Can this be done without setting the width manually using other css properties?
1) Remove float:left from the text div
2) Set overflow:hidden (or auto) on the text div
Updated fiddle
This creates a new block formatting context which causes the text div to fill the remaining width
Try this
<div style="width:300px;background:yellow;">
<div style="float:left;border:solid 2px red;"><!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png">
</div>
<div style="border:solid 2px lime;display:block; text-align: center; overflow: hidden;"><!--Text Div-->
Banana!
</div>
<div style="clear:both;"></div>
</div>
I added display:block; text-align: center; overflow: hidden; and removed the float: left from the text div
use display:table for parent and display:table-cell for the one which you want the width to fill
Note : moved your styles outside
.top {
width: 300px;
background: yellow;
display: table;
}
.inside {
float: left;
border: solid 2px red;
}
.txt {
border: solid 2px lime;
display: table-cell;
width: 100%;
vertical-align: top;
}
.clear {
clear: both;
}
<div class="top">
<div class="inside">
<!--Img Div-->
<img src="https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Dancing-minion-icon.png" />
</div>
<div class="txt">
<!--Text Div-->Banana!</div>
<div class="clear"></div>
</div>
Related
Please, i need some help here. 2 days i can't solve this elementary task. I'm new to the web design and may be this is easy but i just can't understand, why when i use align:left/right or position:absolute for the child divs – main div just disapaer... I want aside bar to the left, tabs under it, and the main content on the right. Please give me some advise, when i do wrong?
Here's a sample:
<div id="main_container">
<aside id="aside1">
<ul>...</ul>
</aside>
<div class="tabs">
<img src="images/tab1.png"/>
</div>
<div id="container">
<p>...</p>
</div>
</div>
And the CSS:
#main_container {
background: #fff;
border-radius: 5px;
box-shadow: 1px 2px 5px 0px #606060;
-moz-box-shadow: 1px 2px 5px 0px #606060;
-webkit-box-shadow: 1px 2px 5px 0px #606060;
position: relative;
}
#aside1 {
margin: 10px 10px;
background: #c0c0c0;
width: 250px;
}
#container {
width: 680px;
}
.tabs {
}
I know that my Css is not finished but i just confused what should i do or use.. position, float, display...
I appriciate any advices!
position: absolute takes an element out of document flow. So, as far as that container is concerned, that child element no longer exists (at least in the sense it doesn't need to reserve space for its layout).
So if all the child elements of a container are positioned as absolute, then that container has no space which it needs to reserve, and collapses.
One solution would be to give the container a defined height, such as #container { height: 100vh; } which will set the height of the container to 100% of the viewport height.
Another solution would be to use something like the flexbox model.
Floated/absolutely positioned containers are removed from the "flow" of a document. This means that any containers around them don't think they exist anymore and the parent containers won't expand to fit around them. If you're using floats, the way to fix this is to put an element underneath the floated elements that uses clear: both like this:
<div id="main_container">
<aside id="aside1" style="float: left">
<ul>...</ul>
</aside>
<div class="tabs">
<img src="images/tab1.png"/>
</div>
<div id="container">
<p>...</p>
</div>
<div style="clear: both"></div>
</div>
for example the CSS in a other way
#main_container {
width: 500px;
}
#main {
display:table;
}
#aside1 {
display:table-cell;
width: 40%;
background-color:#faf;
}
#container {
display: table-cell;
background-color:#555;
}
first you have to modify the structure:
<div id="main_container">
<div id="main">
<aside id="aside1">
<ul>...</ul>
</aside>
<div id="container">
<p>...</p>
</div>
</div>
<div id="bottom">
<div class="tabs">
<img src="images/tab1.png"/>
</div>
</div>
Then the css. The divs have to be defined with display:inline;
Mike
I have 4 DIVs fitted in a row which have width:50% and are floating left so that two of them fit in a line. They have to have a min-width so the content can be shown completely. When I make the page smaller I only have one div in a line left (which is what I want) but its not centered any more...
I want those DIVs always to be centered! Can anyone help me?
HTML code:
<div class="row">
<div class="app-screen-div">
<div class="app-screen">
<img src="images/deal_list.png" alt="Deal Liste">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/code_scan.png" alt="Scan">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/deals_begonnen.png" alt="Started Deals">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/enter_deal.png" alt="Enter Deal">
</div>
</div>
</div>
CSS:
.row {
margin:auto;
padding:auto;
}
.app-screen-div{
float:left;
width:50%;
min-width:280px;
margin:auto;
text-align: center;
position: relative;
}
.app-screen{
border-style:solid;
border-radius:5px;
padding: 1px;
border: 1px solid grey;
background-color:#ff5253;
width:280px;
margin:auto;
}
.app-screen > img {
display: block;
max-width: 100%;
height: auto;
}
thank you!
The solution was to use display: inline-block instead of float: left and I used text-align: center. Take a look at the example at http://jsfiddle.net/rqh0ompa/4/. Please note that you will have to enlarge the Result section quite a bit in order to see the change/
I have this HTML code
<div style="display:inline" >
<div>
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
I got this result:
I need to change my code to get a result like this :
I need the two labels displayed in the same line and each div (parent to each label) having a width of 50 percent of the page's width.
How can i change my snipet to do that?
Thanks
Try something like this:
<div style="display:inline" >
<div style="float: left; width: 50%;">
<label>NOM:</label>
</div>
<div style="float: left; width: 50%;">
<label>Ben felten</label>
</div>
</div>
You need display inline for more than just the parent div.
div{
display:inline;
}
label{
display:inline;
}
http://jsfiddle.net/SVH5C/
add a class to your main div:
<div class="main">
<div >
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
and in your css:
.main div{width: 50%; float: left;}
Or if those inside divs are realy there just for the labels there's no need for them to exist and you can style the labels directly, like:
<div class="main">
<label>NOM:</label>
<label>Ben felten</label>
</div>
CSS:
.main label{display: block; width: 50%; float: left;}
HTML:
<div>
<div class="label-container">
<label>NOM:</label>
</div>
<div class="label-container">
<label >Ben felten</label>
</div>
<div class="labels-end"/>
</div>
CSS:
div.labels-end{
clear: both;
}
div.label-container{
float: left;
width: 50%;
}
And the fiddle http://jsfiddle.net/RsK5N/3/
Div "labels-end" is not mandatory if labels spread over the entire width like in this case.
Without extra clear: both styled div browser will try to put the latter content in the same line as your labels. So it works without this div but only because there is no more width available.
You can also use inline-blocks and table-cells as follows.
Using inline-blocks
<div class="ex1">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex1 {
border: 1px dashed gray;
width: auto; /* will take the width of parent (page) container */
}
div.ex1 label {
display: inline-block;
width: 50%;
background-color: beige;
overflow: auto;
vertical-align: top;
}
Using CSS table-cells
<div class="ex2">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex2 {
border: 1px dashed gray;
width: 100%; /* will take the width of parent (page) container */
display: table;
}
div.ex2 label {
display: table-cell;
width: 50%;
background-color: beige;
}
If you use inline blocks, you need to be careful about any white space between the two label elements since any white space will add to the width of the line and will cause the second label to wrap to a second line. Use vertical-align: top to get rid of the extra white space below the labels which arises because of the inline formatting.
The extra white space issue does not arise with table-cells. Use width: 100% on the table div to make it fill up the width of the parent container (auto gives a shrink-to-fit width).
See demo: http://jsfiddle.net/audetwebdesign/Nb24q/
Comment: You don't need to wrap the label elements in div unless you need them for some other reason.
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}
<html>
<head></head>
<body>
<div>
<div style="float: left; width: 300px; border: 1px solid black;">
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div>
<div style="float: left; width: 300px; border: 1px solid black;">
<div style="background: #FF0000; width: 50px; height: 50px; margin-left: auto;"></div>
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
With the above code the left hand side will have variable content and I need the div in the right hand div (the red box) to site at the bottom so its bottom edge is flush with the bottom of the left div height.
I've tried using auto top margin but I believe the problem is that I can't get the height of the right side div to match the left side div.
Is there some way with CSS to do this or do I have to resort to javascript to match the heights?
Is this what you're looking for?
http://jsfiddle.net/7b3Pc/
Basically, the variable div controls the height of all other sibling divs through its parent div. Siblings absolutely positioned and height:100%.
<html>
<head></head>
<body>
<div>
<div style=" width:600px; border: 1px solid black; position:relative">
<div style="width: 300px;">
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div>
<div style="width: 300px; height:100%; position:absolute; top:0;left:300px; border: 1px solid black;">
<div style="background: #FF0000; width: 50px; height:100%; margin-left: auto;">
</div>
</div>
</div>
</div>
</body>
</html>
Have you tried
margin-top: 0;
Is this what you're looking for: http://jsfiddle.net/htfRw/
Tested in Safari, Firefox
EDIT:
Here it is inside a container: http://jsfiddle.net/htfRw/2/
You really don't need to use float here at all. I'd recommend using display: inline-block instead, because you can then rely on the vertical-align property to vertically position your second <div> instead of using margin .
HTML:
<div>
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div><div class="second">
<div></div>
</div>
Note that there is no space between the closing </div> and <div class="second">. Because both of these elements are inline elements, any whitespace in the markup will cause there to be small, horizontal space between the two elements.
CSS:
body > div {
width: 300px;
border: 1px solid #000;
vertical-align: bottom;
display: inline-block; }
.second div {
background: #FF0000;
width: 50px;
height: 50px; }
Preview: http://jsfiddle.net/Wexcode/FwD3Q/