I have (2) div elements displayed as inline-block's.
I'm attempting to make the second div container that is wrapped around a <p> element extend to the width of the screen. Not sure how to accomplish this.
Ideally, the red container will stretch to the edge of the screen to the right.
<div style="background-color: grey; width:16px; display: inline-block;">
<p>-</p>
</div>
<div style="background-color: red; display: inline-block;">
<p>Test Text</p>
</div>
You want the second block to behave like a display: block (taking up as much width as possible) while keeping the first block as a display: inline-block.
Thus, in this case, you need a float: left, not display: inline-block.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: grey; width:16px; float:left">
<p>-</p>
</div>
<div style="background-color: red;">
<p>Test Text</p>
</div>
</body>
</html>
Note: a more modern way of doing this is using display: flex.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="display: flex;">
<div style="background-color: grey; width:16px;">
<p>-</p>
</div>
<div style="background-color: red; flex: 1;">
<p>Test Text</p>
</div>
</div>
</body>
</html>
If you want to keep your element as display: inline-block, you can make use of calculation-driven variables, and set the second div to occupy 100% of the width of the container minus the width of the first element (and margins):
:root {
--left-width: 16px;
}
div:nth-of-type(1) {
display: inline-block;
background-color: grey;
width: var(--left-width);
}
div:nth-of-type(2) {
display: inline-block;
background-color: red;
width: calc(100% - var(--left-width) - 4px);
}
<div>
<p>-</p>
</div>
<div>
<p>Test Text</p>
</div>
Related
What I need is two divs in following fashion:
[-width-of-content-][------------------remaining-width-of-page----------------------------]
I remember how in olden days it was a breeze to do this by using tables. But now tables are taboo, so how do I achieve this with div? I have been spending hours trying to figure this one out!
<div style='float:left;display:inline-block'> Hello</div>
<div style='float:left;width:100%''> THIS DIV BREAKS</div>
You could also achieve this using flexbox: http://jsfiddle.net/yr05wkuh/1/
This would keep your DIVs the same height, without requiring you to set a value.
CSS
.container {
display: flex;
}
.div1{
background-color:yellow;
}
.div2{
flex: 1 0;
background-color: red;
}
HTML
<div class="container">
<div class="div1"> Hello</div>
<div class="div2"> THIS DIV BREAKS</div>
</div>
Here's a good resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You only need to float the left element.
HTML
<div id="left">Hello yoyoyoy jrllo hello blah blah</div>
<div id="right"></div>
CSS
#left,#right{
height:50px;
}
#left{
background:red;
float:left;
}
#right{
background:green;
}
https://jsfiddle.net/qb3374ou/
EDIT: right div with content.. same result
https://jsfiddle.net/qb3374ou/1/
two divs side-by-side is impossible but this might work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
width of content
<div class="col-sm-9">
Remaining width of page
</div>
</div>
</div>
hope it helped.. .
Sorry bro,.. my mistake... this one is more working :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">Width of content</div>
<div class="col-sm-8" style="background-color:lavenderblush;">Remaining Pages</div>
</div>
</div>
</body>
</html>
Not sure if I'm understanding you correctly, but I think you're trying to get this:
HTML:
<div class="right">Text goes here</div>
<div class="left">Text for the left div goes here</div>
CSS:
.right {
float:right;
background: #ddd;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.left {
background-color:#ccc;
height: 100px;
}
fiddle: http://jsfiddle.net/veW2z/88/
Actually,"col-md-" are the classes of Bootstrap ..u need to include the Bootstrap css to make it work..Here is the link for itenter link description here
This contain complete Bootstrap but u need to include only the css in it and write the code
I want to put some text on the left of my page, some on the center and some of the right. Like this:
Left Center Right
And I tried with that code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY>
<div>
<p style = "float:left"> Left </p>
<p style = "float:center; text-align: center;" > Center </p>
<p style = "float:right"> Right </p>
</div>
</BODY>
</HTML>
and it positions the different words correctly but in different lines. I want that the three words will be on the same line.
I also tried changing all paragraphs <p> to <span> and the three words are displayed in the same line but only the words Left and Right are positioned correctly. The word Center it is not displayed on the center, just following the word Left.
I saw that in some cases people do this with a table.
Is it possible to avoid it and get the same behaviour?
Thanks in advance!
JSFIDDLE example
<div>
<p>Left</p>
<p>Center</p>
<p>Right</p>
</div>
div {
display: flex;
justify-content: space-between;
}
P.S. Keep in mind the flexbox support
This will work: JS Fiddle
HTML
<div>
<p class="left-text col">Left Text</p>
<p class="center-text col">Center Text</p>
<p class="right-text col">Right Text</p>
</div>
CSS
.col {
float: left;
width: 33.33333333%;
}
.left-text {
text-align: left;
}
.center-text {
text-align: center;
}
.right-text {
text-align: right;
}
That should help
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<style>
.pos{
width:33%;
display: inline-block;
}
</style>
</HEAD>
<BODY>
<div>
<span class=pos align=left> Left </span>
<span class=pos align=center> Center </span>
<span class=pos align=right> Right </span>
</div>
</BODY>
</HTML>
I have a responsive <div> element placed in between two fixed <div> elements. I've tried the following code:
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div</div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red" class="row">Responsive div</div>
</div>
</body>
</html>
Currently the responsive <div> element is taking the whole screen. When I try to checkout the width and height, it has acquired my entire main <div>. Is there any approach where I can put this responsive <div> inside 2 fixed <div>?
Check below code: Here I have altered Div sequence and change display style of the three.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="display:table; width:100%">
<div style="display:table-cell; width:270px; background-color: green">Fixed div </div>
<div style="background-color: red; display:table-cell;"> Responsive div </div>
<div style="display:table-cell; width: 120px; background-color: yellow"> Fixed div</div>
</div>
</body>
</html>
Since you got their div widths already, we can took advantage of the calc
width: calc(100% - 390px);
The 390px value is the sum of the width of left and ride side elements.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div </div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red; width: calc(100% - 390px);margin-left: 270px;" class="row"> Responsive div </div>
</div>
</body>
</html>
Try with this:
<body style="display:table;width:100%;">
<div style="float: left; width:270px; background-color: green;display:table-cell;">Fixed div </div>
<div style="background-color: red;display:table-cell;" class="row"> Responsive div </div>
<div style="float: right; width: 120px; background-color: yellow;display:table-cell;"> Fixed div</div>
</body>
<!DOCTYPE html>
<html>
<head>
<style>
* {margin:0;padding:0;outline:0;border:0;}
aside {background:red;width:40%;display:table-cell;}
.two {width:40%;background:blue;display:table-cell;}
.one {width:30%;background:green;display:table-cell;}
#wrapper {display:table;width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<aside>
<div style="height: 100px; width: 100px; border: 2px solid orange;">
</div><!-- / -->
</aside>
<section class="two">
Text
</section>
<section class="one">
Text
</section>
</div>
</body>
</html>
Here is a JSFiddle of the code: http://jsfiddle.net/jtmkrueger/Aza47/
How can I get the content in the cells to always be valigned to the top in this situation? Notice that 'text' in the second and third boxes is pushed down...
Use a vertical-align: top; style.
See the updated jsfiddle.
I am trying to create one table using the <span> and <div> concept.
But the table is not coming together properly. I couldn't find where the issue is. Please tell me what the problem is. I have to produce 4 to 5 lines in a same row.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.line1
{
background-color:#AAAAAA;
height: 150px;
width: 1px;
display: block;
}
.line2
{
background-color:#CE5611;
height: 150px;
width: 1px;
display: block;
margin-left: 121px;
}
</style>
</HEAD>
<body>
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
</body>
</html>
Instead this way of going :
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
do
#wrapper .content{
float:left
width:100px;
padding:.5em;
}
#wrapper .content span{
font-weight:bold;
}
<div id="wrapper">
<div class="content"><span>line 1</span></div>
<div class="content"><span>line 2</span></div>
<div class="content"><span>line 3</span></div>
</div>
you got the idea ..
Do you really want the classed spans to have display: block? That forces each one onto a seperate line. Functionally, <span style="display: block"> is kinda the same thing as <div> (and <div style="display: inline"> is kinda the same thing as <span>).
You're probably looking for display: inline-block. That gives you the ability to block attributes (height, width) like you are, but still leave it moving around within the surrounding contents. Another alternative is to use display: table-cell. There's a chart of display support here.
You should use a <table>.
I prefer using li and span tags instead of div and span. It makes manipulation much easier. With li as block and span inline-block.