Using TWBootstrap with span3 and span4 columns. I want to align the text in span3 to the bottom of image in span9. I think I have achieved this but feel I've thrown in the kitchen sink to do it. Also I don't understand why the TWB span sizes aren't working? For example how do I get the leftcol text to right aligned and to the edge of this column? Could someone please explain - I seem to be going round in circles. The example is on jsfiddle
<div class="container">
<div id="main">
<div class="row">
<div id="leftcol">
<span class="span4">
<h1>Right</h1>
<h4>Enter</h4>
</span>
</div>
<span id="mainpic" class="span8 box">
<p align="middle">green box </p> <p align="middle">representing image</p>
</span>
</div>
</div>
</div>
css
body { height: 100%; width: 100%; position: absolute; }
h1 h4 { text-align:right; }
#main { position:relative; background:red; height:400px; width:300px; }
#leftcol { position:absolute; background:blue; bottom:5px;}
#mainpic { position:absolute; background:green; top:10px; left:25%; }
.box { height: 370px; width: 300px; border: solid 10px #ccc; }
I'm wondering if you are using the right tool for the job? You've wrapped all your content in a main div that you have given a width of 300px. In addition to some other problems, at this width bootstrap collapses to a single stacked column.
Related
I am new to bootstrap and web development. I wanted to make a responsive div which always maintains a length to width ratio of 16:9. With a header and footer section above this responsive portion. But the header and footer sections are stacked up on each other. Any help would be appreciated.
html
<div class="post-card-outer">
<div class="post-card-inner">
<div class="space-header">
</div>
<div class=" post-content">
<div class="col-sm-6 content-leftcol">
<div class="image-sec-post-card">
<img class = "image-post-card" src="3.jpeg">
</div>
</div>
<div class="col-sm-6 content-rightcol">
right
</div>
</div>
<div class="space-footer">
GGDYGDYGDYGDYGYDGDGYD
</div>
</div><!--post-card-inner-->
</div><!--post-card-outer-->
css
.post-card-outer{
width: 100%;
padding-bottom: 56.25%; /* 16:9= 56.25 %; 4:3 = 75%*/
position: relative;
background: coral;
margin-top:50px;
}
.post-card-inner{
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.space-header {margin-top:-10px; height:10px; background-color:red;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;}
.post-content{
min-height:100%; background-color:green;
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.content-leftcol{
background-color:black;
width:50%;
height:100%;
}
.content-rightcol{
background-color:blue;
width:50%;
}
.image-sec-post-card{
border:1px solid white;
vertical-align: middle;
overflow: hidden;
}
.image-post-card{
max-width:100%;
max-height:100%;
border:1px solid green;
}
Well if your header is meant to be at the very top and your footer is meant to be at the very bottom of the page/element then youR could use absolute or fixed positioning.
When you use absolute positioning the element is automatically set to the top-left of the window/element. You can think of it as a (0,0) positioning on a grid. Once you tell the element to be positioned absolutely you can use the TOP, RIGHT, BOTTOM, and LEFT properties. These properties directly influence the origin of your element. For example Top:0 will place your element at the very top of the window and Bottom:0 will place your element at the very bottom of the window. If you wanted to put a little space in between the element and the side of the window then you could simply increase the number. Top:20px or Top:2vh
Fixed positioning is nearly the same except your element will be static and wont move even if you try to scroll up or down. This is how you achieve fixed navigation bars and fixed footers.
.space-header {margin-top:-10px; height:10px; background-color:red;top:0;position:absolute;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;bottom:0;position:absolute;}
body{ margin:0; padding:0; color:#fff;} .space-header {height:50px; background-color:red;} .space-footer {height:50px; background-color:red;color:white;} .post-content{min-height:100%; background-color:green;} .content-leftcol{background-color:black;width:50%;height:47vw; float:left;} .content-rightcol{background-color:blue;width:50%;height:47vw; float:left;} .image-sec-post-card{border:1px solid white;vertical-align: middle;overflow: hidden;}.image-post-card{max-width:100%; max-height:100%; border:1px solid green;} .clearfix{clear:both; float:none;}
<body><div class="space-header">Header
</div>
<div class="clearfix"></div>
<div class=" post-content">
<div class="col-sm-6 content-leftcol">
<div class="image-sec-post-card">
<img class = "image-post-card" src="3.jpeg">Left
</div>
</div>
<div class="col-sm-6 content-rightcol">
right
</div>
<div class="clearfix"></div>
<div class="space-footer">
Footer
</div>
</div> </body>
I have two divs under menu of site: content and right-content.Right content is sidebar which is fixed to the right side of screen,and he has a wiht 200px.Content is div for content of site and I want him to start on the left side of the screen and to stop when it reaches the right-content.Some suggestions?
HTML code of DIVs:
<div id="content">
</div>
<div id="rightcontent">
bla vlaaa
</div>
CSS code:
#content {
float:left;
position:absolute;
background-color:#ffffff;
height:500px;
}
#rightcontent {
margin-top:5px;
border:1px solid;
border-color:#ffffff;
border-radius:5px;
float:right;
position:relative;
background-color:#D4D3D0;
width:300px;
height:500px;
}
You can use a wrapping div for the content, and padding or margins to do this. For example, the style sheet could look something like this:
.div-content-wrapper {
width: 100%;
}
.div-content {
margin-right: 200px;
}
.div-rightsidebar {
width: 200px;
position: fixed;
right: 0;
top: 0;
}
And the html would look like this:
<div class="div-content-wrapper">
<div class="div-content">
<h1> This content will not go further than 200px from the right side</h1>
</div>
<div class="div-rightsidebar">
<h4>Right bar content</h4>
</div>
</div>
The right sidebar can go inside or outside of the wrapper, it doesn't really matter.
I want to have a container with a set width and height.
Within that container I have:
a vertically and horizontally centered text
a few vertically centered icons on the left side of the container
a few vertically centered icons on the right side of the container
My test code:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
display:inline-block;
font-size:18px;
text-align:center;
}
.iconsleft, .iconsright {
display:inline-block;
}
.iconsright {
right:0;
}
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">centered text</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
</div>
(I took a random icon from google for this test)
This is what my test code looks like and what it should look like:
http://imgur.com/0QfcQnF
CodePen
I try to avoid floats:
http://jsfiddle.net/techsin/Gz4nv/1/
Things I did:
Inserted Blank content which has its type set to inline-block (by default content added by css content:'etc' is inline element), and make it 100 percent the height of container, thus stretching the line height to height of container. So when i would vertical-align something it would see whole height of container as something to get aligned with.
Declare container position as relative. Which would help in positioning icons absolutely. Because absolute positioning refers to first parent element that has been explicitly positioned relatively. position:relative.
Than simply put left:0; on left container and right:0; on right one.
make them both move down 50% the height of container.
Then make them move them up 1/4th the height of container to bring them in center vertically by giving them negative margin.
Demo
If you want the icons to go to one side, you should tell them to float in that direction.
The text isn't centered because it only takes up as much space as it needs. Explicitly setting a width, will tell it to take up more space, and thus allow the text to be centered. This could be in pixels or percentages. For example if you have a container with width A and four images with width B (each), you could set the width to A - 4B pixels.
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright {
display:block;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
Just float the two side <div>s to left and right, and put the right <div> before the centered <div> in the HTML structure.
Demo here
<style>
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
font-size:18px;
text-align:center;
}
.iconsleft {float: left;}
.iconsright {float: right;}
</style>
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">Centered demo text</div>
</div>
By changing the container height and giving it some bottom padding, you can make the full box vertically centered.
Bonus demo
Change height: 70px; in .container to this:
height: 50px;
padding-top: 20px;
text-align: center needs to be set on the parent block, not the centered block, if you have display: inline-block.
Also vertical-align:middle; won't do you any good, unless you're in a table cell (or a div styled like one). If you want "real" vertical centering on IE7+ use good ol' tables, in conjnction with vertical-align: middle. Or just fake it with margins.
For .iconsleft and .iconsright use you might want to try floats, or position: absolute;
CSS:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
margin:auto;
text-align:center;
}
.text {
font-size:18px;
margin-top: 22px;
}
.iconsleft, .iconsright {
margin: 20px 10px 0;
}
.iconsleft {
float: left;
}
.iconsright {
float: right;
}
HTML (floats need to be written before the content):
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="text">centered text</div>
</div>
Demo with vertical and horizontal align.
I used a simple grid system to align everything up - CSS:
.grid {
width:200px;
height:70px;
float:left;
}
HTML:
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
<div class="grid text">centered text</div>
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
I know this may not be the the perfect way but I think this hack might help:
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright, .text {
display:inline-block;
margin-top:20px;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
I am quite new to css and html, and I am having trouble floating divs within a another div,
I've done quite a bit of research online but have not been able to come up with a solution.
these are the sites I have read and where of no use:
barelyfitz /screencast/html-training/css/positioning/
stackoverflow /questions/580195/css-layout-2-column-fixed-fluid
mirificampress /show.php?id=106
How to get Floating DIVs inside fixed-width DIV to continue horizontally?
My code can be found on jsFiddle here
I hope this will help.
CSS:
#left, #right {
width: 100px; //change this to whatever required
float: left;
}
HTML :
<div id="wrapper">
<div id="left">
<p class="t0">lorum itsum left</p>
<div>
<div id="right">
<p class="t0">lorum itsum right</p>
<div>
<div>
Like this?
http://jsfiddle.net/Ev474/
<div id="wrapper">
<div id="inner">
<div id="left">
Left Content
</div>
<div id="right">
Right Content
</div>
</div>
</div>
div {
height: 50px;
}
#wrapper {
width: 200px;
overflow-x: auto;
overflow-y: hidden;
background-color: #ccc;
}
#inner {
width: 400px;
}
#left {
width: 150px;
float: left;
background-color: #f00;
}
#right {
width: 150px;
float: left;
background-color: #0f0;
}
Since you are a beginner. I will make it straight forward. Below is extraction of your code. I used internal style sheet. Your example you are using external style sheet.
Using float attribute you can set it to left and right. Here is used float:left to alight one div to left and float:right to alight other one to the right.
Each opened tag has to be closed tag.
<head>
</head>
<!--Internal style sheet-->
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div id="wrapper" >
<div class="left">
<p class="t0">lorum itsum left</p>
</div>
<div class="right">
<p class="t0">lorum itsum right</p>
</div>
</div>
</body>
</html>
Additional note: If you want to adjust the size of left and right div then use width in style sheet. Refer the updated style sheet below. I made left div width to 80% of the screen width and right width to 20%.(total should be 100%). Adjust accordingly.Background color used to set the background color of the div.
.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}
here is the structure of my html
<style>
.left {
float:left;
width: 450px;
}
.center {
float:left;
width: 150px;
}
.right {
float:right;
width:450px;
}
</style>
<div>
<div class="left">
</div>
<div class="center">
Add
</div>
<div class="right">
</div>
</div>
The content of the left div is a table loaded via ajax. What I would like to do is have the link vertically centered (or darn close) dynamically so that when teh table is loaded and that div changes in height my link then moves appropriately. I've created a grid view control on this table and based on the selected value I want to use the link to populate the right column. Any help would be appreciated. The center div has a fixed width but height would probably fill the containing div to allow for vertically centering.
<style>Update
.left {
float:left;
width: 450px;
}
.center {
width: 150px;
margin-left:auto;
margin-right:auto;
}
.right {
float:right;
width:450px;
}
</style>
<div>
<div class="left">
</div>
<div class="center">
Add
</div>
<div class="right">
</div>
</div>
P.D: Don't forget to tick , thanks :D