The question may sound a bit... stupid. But I'm kinda stuck.
I'm using Twitter Bootstrap. My test code is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background:#eee; border:1px solid blue;">
<ul class="nav nav-list">
<!-- List contents -->
</ul>
</div><!--/span-->
<div class="span9" style='background:#fff; padding-left:10px; border:1px solid red'>
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website...</p>
<p><a class="btn btn-primary btn-large">Learn more ยป</a></p>
</div>
<div class="row-fluid">
<!-- The content -->
</div><!--/row-->
</div>
</div>
</div>
And this is what it looks like (I'm using colored borders to show you WHERE each of the 2 divs is) :
Now, my question is :
Is there any way I could have the second, red-bordered, div (span9) occupy THE WHOLE rightmost column (without any margins around it), so that the final result looks like :
the Control Panel on the left (a whole column with with that gray-ish background)
the right-most div on the right (occupying all of the remaining space, with a white background)
I don't have much experience with twitter bootstrap, but I'm assuming that the answer would be to look at the css properties for your 'row-fluid' class and check the margin and width.
margin: 0 auto; will give remove any margin (space around the outside of the div) and center it in the container
if ^ is already true, width=50%; (if you're going to have both side by side)
Hope that helps!
Related
This is my html code:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin:0;">
<article>
<img src="http://placehold.it/1000x500" class="img-responsive" alt="">
<div class="content">
<h3>Title</h3>
<p><i class="fa fa-calendar-o"><small> 1 June</small></i> <i class="fa fa-clock-o"><small> 11:45 PM</small></i></p>
<p>For many individuals and businesses developing a strong social media presence is a cornerstone of their digital strategy, so prioritising social media.... <font color="#88c78a">Read More</font></p>
<div class="pull-right"><i class="fa fa-eye"></i> <small> 400 Views</small></div>
<div class="pull-left" ><i class="fa fa-thumbs-up"></i> <small> 400 Likes</small></div>
</div>
</article>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
My div currently looks like this:http://s13.postimg.org/fdis1mxyv/div.png
If you go through the image then you will see that there is some space from left and right green margin. I want that space to go away.
Which attribute of div will help do this thing?
The attribute in the css that makes that it writes the content of the child objects is the attribute called "padding". There is 5 types of different paddings :
padding=*X*; Makes the content to be wrote with a margin at every side
padding-top:*X*; Makes the content to be wrote with a margin from the top
padding-left:*X*; Makes the content to be wrote with a margin from the left side
padding-right:*X*; Makes the content to be wrote with a margin from the right side
padding-bottom:*X*; Makes the content to be wrtoe with a margin from the bottom
And then, you can play with these in CSS by specifying only the ones that you want (the number X is either in px or in %. e.g.: padding-top:10px;)
So for your you have to search the child parent class that contains the childs you want to be aligned to the div, and you change the value :
.parent
{
padding:*X*px;
//or padding-top, padding-left, padding-right, padding-bottom, in fonction of wich one you want
}
Here is a snippet to show you an example :
.parent_no_padding
{
padding:0px;
}
.child_no_padding
{
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
}
.parent_with_padding
{
padding:20px;
}
.child_with_padding
{
padding:20px;
}
<table border="1"><tr><td>
<!-- Only for the look -->
<div class="parent_no_padding">
<h3>Title here</h3>
<div class="child_no_padding">
<p>Content of the child</p>
Write a little sentence here to make some content (without padding)
</div>
</div>
<br/></td></tr><tr><td>
<div class="parent_with_padding">
<h3>Title here agagin</h3>
<div class="child_with_padding">
<p>Content of the child</p>
Write a second little sentence (with padding)
</div>
</div>
<br/></td></tr><tr><td>
<div class="parent_with_padding">
<h3>Title here over and over</h3>
<div class="child_no_padding">
<p>Content of the child</p>
Write a last little sentence (parent with padding but child without padding)
</div>
</div></td></tr></table>
Hope this helps ! (don't forget to check an answer if it's right, to help other people to see what works)
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
I'm trying to position sidebar on the right side in a site based on Bootstrap grid.
Well, this is very simplified layout that I've made - jsFiddle
I admit it's not the good use of bootstrap classes (rows etc.) but it works.
The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content).
I tried positioned it as an relative element but didn't have any luck.
The text in .text div does not have static height, it will change
The .content will have same height every time
Is this more what you were after?
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<div class="col-xs-12 content">Main</div>
<div class="col-xs-12 text">Lorem</div>
</div>
<div class="col-xs-3 sidebar pull-left">
<p>sidebar</p>
</div>
</div>
</div>
jsFiddle
Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. I then applied both the pull-left and pull-right class to the relevant containers.
I also fixed up your HTML a bit as it was missing a div tag. I also got rid of some of the text to make the code more readable to me!
I need to do something like this using Boostrap. "Fluid" content on the page with two widgets inside it - first at top-right and second at left-bottom.
Widget1 is easy - I just needed class="pull-right". But what to do with the second one to get it to the bottom of the page keeping "Content" floating around?
style="bottom:0;"does not work:
Having this code
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
<div class="offset1 span8 pull-left" style="bottom:0;">
... Widget 2...
</div>
.... a lot of content ....
</div>
</div><!--/.fluid-container-->
I have this as a result:
Moving Widget 2 down also does not help:
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
.... a lot of content ....
<div class="span8 pull-left" style="bottom:0;margin-left: 0;">
... Widget 2...
</div>
</div>
</div><!--/.fluid-container-->
Any ideas how to do that without dirty hacks (for example I could use JavaScript to fix Widget2 position)?
Or (ok, ok) with them?
From all I have read you cannot do exactly what you want without javascript.
If you float left before text
<div style="float:left;">widget</div> here is some CONTENT, etc.
Your content wraps as expected. But your widget is in the top left. If you instead put the float after the content
here is some CONTENT, etc. <div style="float:left;">widget</div>
Then your content will wrap the last line to the right of the widget if the last line of content can fit to the right of the widget, otherwise no wrapping is done. To make borders and backgrounds actually include the floated area in the previous example, most people add:
here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>
In your question you are using bootstrap which just adds row-fluid::after { content: ""} which resolves the border/background issue.
Moving your content up will give you the one line wrap :
http://jsfiddle.net/jJNPY/34/
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
.... a lot of content ....
<div class="span8" style="margin-left: 0;">
... Widget 2...
</div>
</div>
</div><!--/.fluid-container-->
I understand that you want the Widget2 sharing the bottom border with the contents div. Try adding
style="position: relative; bottom: 0px"
to your Widget2 tag. Also try:
style="position: absolute; bottom: 0px"
if you want to snap your widget to the bottom of the screen.
I am a little rusty with CSS, perhaps the correct style is "margin-bottom: 0px" instead "bottom: 0px", give it a try. Also the pull-right class seems to add a "float=right" style to the element, and I am not sure how this behaves with "position: relative" and "position: absolute", I would remove it.
Take a look at my page here:
REMOVED
I have a big red div taking up the entire content area. I plan on having it stretch across the entire page horizontally. I'm going to be using a carousel effect to allow my clients to sign up for an appointment one step at a time. The div is a child of another div but I need it to be wider than it. The center content area is a static width and is centered with margin:auto;. Is there a way to make my child div as wide as the whole page while hopefully only using css?
**<div id="servicesteps"> </div>**
is the red div just remove it from your <div clas="shadow" id="content">
and put it above footer div and it should work
your final body tag will look something like this
<div id="header"><div id="headpadding"></div><div class="headbutton noselect">Home</div><div class="headbutton noselect">Services & Pricing</div><div class="headbutton noselect">service details</div><div class="headbutton noselect">Request Service</div><div class="headbutton noselect">Contact</div></div>
<div id="content" clas="shadow"><div class="noselect" id="logo"></div><div id="buttonarea"><a style="display:table-cell;" href="details.html"><div class="noselect greenbutton"><span class="buttontitle">GET THE DETAILS</span>Learn about what we do before you come over!</div></a><span style="width:51px;display:table-cell;"> </span><a style="display:table-cell;" href="get.html"><div class="noselect bluebutton "><span class="buttontitle">REQUEST SERVICE</span>Get your computer serviced in the next 48 hours!</div></a></div><!-- InstanceBeginEditable name="content" -->
<div class="fold noselect"><span style="background-color:#4F69FF;">Request Service</span></div>
<table id="currentstatus">
</table>
<!-- InstanceEndEditable --></div>
<div id="servicesteps">
</div>
<div id="footer">Dade Lamkins (DadeFixMyComputer.com) Copyright 2011.</div>
If I understand correctly, you would like something to stretch all the way from one side to the other. This is what I would do:
width: 100%;
That should work with your problem.