I am trying to achieve the layout shown in the picture with CSS. I am currently using float:left; for both text sections with a width: 100%; but they keep moving below the fixed image on the left.
<div style="float:left;">
<div style="width: 100px; height: 200px;">
Some Image
</div>
<div style="float:left;">
<div style="float:left; width: 100%;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
</div>
This doesn’t need that much floating and/or explicit widths.
overflow:hidden can be used to make the element next to the floated image keep that reduced width, instead of being laid out under the whole image (which is the effect float normally has - the div itself would still go over the whole width, and only its content flows around the image.)
.container {
width: 250px;
outline: 1px dashed;
}
.container img {
float: left;
}
.container div {
overflow: hidden;
}
<div class="container">
<img src="https://via.placeholder.com/100x200">
<div>
<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
</div>
</div>
Well this is more style issue and can be done by making second div to align/float right. Further you can use width on outer div too.
<div style="float:left; width: 40%">
<div style="width: 100px; height: 200px;">
Some Image
</div>
<div>
<div style="float:right; width: 60%">
<div style="float:left; width: 100%;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
<div style="float:left; width: 40%">
<div style="width: 100px;">
Some Image
</div>
<div>
<div style="float:right; width: 60%">
<div style="float:left;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
Problem is Height 200px is remove than check please
body{padding:20px;}
body div{margin:5px;}
.main{display:block; border:2px #333 solid; width:100%; overflow:hidden;}
.vert{ padding:1%; border:2px #333 solid; width:20%;
height:200px; float:left; }
.vert img{width:100%}
.hor{position:relative; left:0px; righ:0px; width:66%; float:left; }
.hor div{border:2px #333 solid; width:99%; margin-bottom:5px; padding:5%;}
<div class="main">
<div class="vert"><img src="https://cdn4.buysellads.net/uu/1/3386/1525189887-61450.png"></div>
<div class="hor">
<div>Some Text some text some text</div>
<div>Some Text some text some text</div>
<div>Some Text some text some text</div>
</div>
</div>
Related
I'm running into an issue with position: absolute and I can't find an answer anywhere that explains why it's happening.
I have a flexbox container inside a wrapper with two children that are each set to flex-basis: 50%. When I set position: absolute on the wrapper div, the wrapper shrinks in an unpredictable way.
See the code below:
.outer-wrapper {
position: relative;
width: 100%;
}
.outer-wrapper .wrapper {
position: absolute;
}
.outer-wrapper .wrapper .flex-container {
display: flex;
}
.outer-wrapper .wrapper .flex-container .flex-item {
flex-basis: 50%;
}
<div class="outer-wrapper">
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">
Some Text That Is Long
</div>
<div class="flex-item">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item">
Some Text
</div>
<div class="flex-item">
Some Text
</div>
</div>
</div>
</div>
Removing line 6 in the CSS causes the flex-container to expand to the full width of the parent and each flex child takes up 50% of the width, as expected. However, when I set the wrapper div to position: absolute, the wrapper div shrinks to what seems like an arbitrary width and the text in the flex-children breaks onto multiple lines.
My questions:
Why does setting position: absolute on the wrapper div cause the wrapper div to shrink smaller than its content?
How does the browser determine what width to shrink the wrapper div to? It seems to me like it would either shrink to be as small as possible without introducing line breaks into the text, or would shrink as small as possible while still fitting the longest word, but instead it's shrinking to somewhere in the middle (it only introduces one line break in a string of short words).
Is there a way, while still using flexbox and position: absolute in this way, to force the browser to not shrink the wrapper smaller than its content (unless there is a max-width set on the wrapper)?
Really appreciate any help! This has been driving me crazy!
Why does setting position: absolute on the wrapper div cause the wrapper div to shrink smaller than its content?
How does the browser determine what width to shrink the wrapper div to?
The trick is the use of flex-basis::50%. You are in a situation where you are using a shrink-to-fit container (position:absolute element) and at the same time you are using percentage value inside the flex-basis. So the browser is first calculating the width of the container (ignoring the flex-basis) then the width calculated will be used as reference for the flex-basis.
Here is an illustration of what is happening:
.wrapper {
position: absolute;
border:1px solid red;
}
.wrapper .flex-container {
display: flex;
}
.wrapper .flex-container .flex-item {
/*flex-basis: 50%;*/
border:1px solid green;
}
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">
Some Text That Is Long
</div>
<div class="flex-item">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item">
Some Text
</div>
<div class="flex-item">
Some Text
</div>
</div>
</div>
<div class="wrapper" style="top:100px;">
<div class="flex-container">
<div class="flex-item" style="flex-basis: 50%;">
Some Text That Is Long
</div>
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
</div>
</div>
Notice how in the first example (without flex-basis) the width is equal to the largest content. In the second example you will see that the total width didn't change but we made the flex items equal in width.
The same logic also happen with inline-block or float or any shrink-to-fit container.
.wrapper {
display:inline-block;
border:1px solid red;
}
.wrapper .flex-container {
display: flex;
}
.wrapper .flex-container .flex-item {
/*flex-basis: 50%;*/
border:1px solid green;
}
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">
Some Text That Is Long
</div>
<div class="flex-item">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item">
Some Text
</div>
<div class="flex-item">
Some Text
</div>
</div>
</div>
<br><br>
<div class="wrapper">
<div class="flex-container">
<div class="flex-item" style="flex-basis: 50%;">
Some Text That Is Long
</div>
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
</div>
</div>
To get what you want it's clear that you need to not use flex-basis:50% and consider a different idea to get the same width.
Here is one using CSS grid as I think it would be tedious with flexbox:
.wrapper {
position:absolute;
border:1px solid red;
}
.wrapper .flex-container {
display: grid;
grid-template-columns:repeat(2,1fr);
}
.wrapper .flex-container .flex-item {
border:1px solid green;
}
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">
Some Text That Is Long
</div>
<div class="flex-item">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item">
Some Text
</div>
<div class="flex-item">
Some Text
</div>
</div>
</div>
The reason it is shrinking is since you are setting position absolute without specifying a width.
Block element feature of having the full width of the parent's content area will not be honored when an element is absolute positioned.
If you want to retain the width (100% of the container) of a block element, then set the width of the absolute element .wrapper to 100% and problem solved.
.outer-wrapper {
position: relative;
width: 100%;
}
.wrapper {
position: absolute;
width:100%;
}
.flex-container {
display: flex;
}
.flex-item {
flex-basis: 50%;
}
I have a jsfiddle here - http://jsfiddle.net/ktmzk3jk/
I'd like to make the red background on the blocks the same height.
I'm sure I could do it with Jquery but is there a standard CSS soultion.
<div class="container">
<div class="row">
<div class="col-sm-4 col">
<div class="block">
<h3>65%</h3>
<p>Some Text Some Text</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="block">
<h3>20%</h3>
<p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="block">
<h3>5%</h3>
<p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
</div>
</div>
</div>
</div>
Try like this DEMO
CSS:
.row-full-height {
height: 100%;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
.row-same-height {
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.col-xs-height {
display: table-cell;
float: none !important;
}
HTML:
<div class="row">
<div class="row-same-height row-full-height">
<div class="col-sm-4 col-xs-height col-full-height">...</div>
</div>
</div>
You shouldn't style that inner <div class="block"> , in fact you shouldn't even have it there;
directly style the .col selector,
here you have a fiddle.
For equal size red blocks, you need to update value of height in .block, set height to height:150px instead of height:100% if you know the maximum height. Otherwise also include overflow:auto; so that a scroll appears if text goes beyond the boundary
Updated JS Fiddle: http://jsfiddle.net/ktmzk3jk/8/
Adding a min-height to would be the best approach but I would recommend a jQuery approach. Especially if the content changes to different lengths often.
i coded a 6 divs beside each other
how can i make one div only to expand to take full width of wrapped div on hover and the other 5 divs get on bottom to the fully expanded div
html:
<div class="row">
<div class="col-md-2" id="discuss_block">
div1.....
</div>
<div class="col-md-2" id="discuss_block">
div2.....
</div>
<div class="col-md-2" id="discuss_block">
div3.....
</div>
<div class="col-md-2" id="discuss_block">
div4.....
</div>
<div class="col-md-2" id="discuss_block">
div5.....
</div>
<div class="col-md-2" id="discuss_block">
div6.....
</div>
</div>
css:
#discuss_block{
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}
#discuss_block:hover{
width:100%;
}
You can use float:left http://jsfiddle.net/sfnxkav5/1/
#discuss_block{
width:50px;
float:left;
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}
I'm trying to build a site with a fixed left sidebar of 220px and a fixed page filling the rest of the screen. I'm attempting to fill the page section with an image and have information over the top. The code works fine in Chrome and Firefox but can't get to work in IE.
Can anyone offer any suggestions for a better alternative I'd imagine without using absolute divs?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrap">
<div id="sidebar">
<div class="logo">
<a id="logo"> <img src="LOGO.png"/></a>
</div>
<ul class="navigation red" id="red">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
<li>Shop</li>
</ul>
</div>
<div id="page" style="padding:0 !important;">
<img src="images/back.jpg" class="back" alt=""/>
<div id="center">
<div class="header">
<center> <h3 class="page_title">Website Title</h3></center>
</div>
<!-- services -->
<div class="section group">
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background:#FFF;
font-size:14px;
height:100%;
width: 100%;
}
div#wrap {
width:100%;
max-width:100%;
overflow:hidden;
margin:0 auto!important
}
div#sidebar {
width:220px;
height:100%;
float:left;
background: #FFF;
border-right:1px solid #2e2f2f;
position:fixed
}
div#page {
height:100%;
left:220px;
right:0px;
background: #FFF;
position:absolute;
padding:2% 5%;
}
div#center{
margin:0 auto !important;
width:100%;
height:auto;
z-index:1000;
background:rgba(255,255,255,0.5);
}
.group {
padding: 0 20px 0 20px !important;
position:absolute;
z-index:10;
bottom: 20px !important;
left:0;
right:0;
max-width:850px;
margin:0 auto !important;
display:inline-table;
}
.header {
padding:0 20px 0 20px !important;
position:absolute;
z-index:10;
top: 8% !important;
left:0;
right:0;
max-width:850px;
margin-left:auto !important;
margin-right:auto !important;
}
img.back{
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
}
.one_half {
font-size: 17px;
float:left;
width:50%;
overflow:hidden;
}
Been trying to get my head round this for a while now and not making any progress any help would be very appreciated.
Thanks!
--- EDIT ---
Don't think I made clear it's the group and header divs i'm trying to center and which aren't in IE
If this isn't what you want, I'd need you to explain your requirements better.
http://jsfiddle.net/HhddF/
.back {
background-color:#3D6AA2;
height:100%;
width:100%;
}
I'm looking for the best way to create a block of left-aligned text and a block of right aligned text inside a div.
This is an image of what I want it to look like
I've thought about creating three divs with one in the middle acting as a buffer, but it doesn't seem to work. I'd need to hard code the length of the middle div, and this doesn't seem like the best approach
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: left; width: 100%" > </div>
<div style="float: left;">right aligned text </div>
</div>
Why not use the "text-align" property on the second div?
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: right; text-align: right;">right aligned text </div>
</div>
EDIT: You don't need a middle DIV for a spacing. You can simple use a percentage width for the two other DIVs and using float left and right you have a "buffer":
<div style="width: 500px;">
<div style="float: left; width: 45%;">left aligned text</div>
<div style="float: right; text-align: right; width: 45%;">right aligned text </div>
</div>
try this -
<div style="width: 500px;">
<div style="float:left">left aligned text</div>
<div style="text-align: right;">right aligned text </div>
</div>