I am trying to get the layout of my site right, but whatever I try I cant get the effect I want. Since this is hard to explain Ill add a picture of what I want:
Hopefully that makes sense.
Here is the code Im using to try and achieve this:
<div class="row">
<div class="col-md-offset-1 col-md-2">
<div class="container" style="background-color:#ff6a00">
LEFT DIV <br /><br /><br />
</div>
</div>
<div class="col-md-6">
<div class="container" style="background-color:#0094ff">
<asp:ContentPlaceHolder ID="ContentPlaceHolderMid" runat="server">
THIS IS THE MIDDLE
</asp:ContentPlaceHolder>
</div>
</div>
<div class="col-md-2 col-md-offset-1">
<div class="container" style="background-color:#00ff21">
RIGHT DIV <br /><br /><br />
</div>
</div>
</div>
I cant really get it to work, the offset doesnt work the way I think it will and I cant find any answers online.
You are not using the class container the right way, this class only serves to put a max-width ~1000px
Try this:
<div>HEADER</div>
<div class="container">
<div class="row">
<div class="col-md-3">LEFT</div>
<div class="col-md-6">CENTER</div>
<div class="col-md-3">RIGHT</div>
</div>
</div>
Related
I want to make a layout like this, above picture for wide screen and below for small screen. Please suggest me how to do this.
You can something like this is you are using bootstrap,
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
green space...give height as required
</div>
</div>
<div class="row">
<div class="col-md-6">
button
</div>
<div class="col-md-6">
button
</div>
</div>
</div>
</body>
I'm new with CSS. I want to do something simple like have a treeview on span the entire left of a page col-4 for example and several grids on the major portion of the page stacked vertical col-8 for example.
What I have below is pushing the tree the entire width of the page and only one grid is displaying and that is below the tree instead of to the right of it.
I'm not sure if maybe the dynatree or jqgrid CSS is messing this up or my bootstrap is wrong?
<body>
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div id="info"> </div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
</div>
</body>
in your case col-sm-8 will always fell down because of <div id="info"> </div> that is a block element without any float so it run like a bootstrap row.
Try to do this:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
<div id="info"> </div>
</div>
</div>
</body>
or better (according o bootstrap):
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
</div>
<div class="row">
<div id="info"> </div>
</div>
</div>
</body>
As a test, I would remove
<div id="info"> </div>
Divs are block elements, which could be forcing the floated div to a new line.
I am having trouble getting web-kit to cooperate! You can see from the images that the left column does as intended in FF yet Web-kit browsers (Safari and Chrome) produces the second image. I am lost as how to fix the issue!
Firefox Version
Webkit Version
Code for area on question
<div class="container" style="margin-top: 30px; position: relative;">
<section class="row" ><!--id="content" -->
<div class="content_bckgrnd span9">
<div class="item-page">
<p style="text-align: center;"><img src="http://avanti.websitewelcome.com/~ingles/images/demo/store-locations.png" width="531" height="368" alt="store-locations" /></p>
</div>
</div>
<div class="content_bckgrnd span3 ">
<div class="mod-padding">
<div class="mod_content ">
<div class="custom" >
<p style="text-align: center;"><strong><img src="http://avanti.websitewelcome.com/~ingles/images/demo/Bldg-Background.jpg" width="150" height="47" alt="Bldg-Background" /><br data-mce-bogus="1" />
</strong></p>
<p><strong>Store Search</strong><br />
To search for an Ingles store near you, type in your zip code or enter your city and state. Click 'Find Stores' to see your results</p>
<p>Narrow your search by clicking on the options to the right. Search for stores with Pharmacies, Bakeries, or ones that are open 24 hours.</p>
<p><strong>Your Results Page</strong><br />
'More Information'- click this to see store locations and to get directions to the store.</p>
<p>'Weekly Ads' click this to view your stores weekly ads.</p>
<p><strong>Sort Your Results</strong><br />
Sort your results by clicking Store, Address, City, State or Zip at the top of the results.</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
<div class="wrapper background" id="module-positions">
<div class="container" style=" min-height:65px;">
<!-- module-positions -->
<section class="row"> </section>
<div class="row">
<div class="span6"> </div>
<div class="span6"> </div>
</div>
</div>
</div>
JsFiddle
Link to development site for raw code view
You will define a div #HomeTopBckgrnd with:
height: 1240px;
margin-top: -360px;
fixed heights will ask for troubles.
Why not something like:
<header></header>
<div id="HomeTopBckgrnd"> Your centent here</div>
<footer></footer>
or
<div id="HomeTopBckgrnd">
<header></header>
<div> Your centent here</div>
<footer></footer>
</div>
I have following aspx page called search.aspx:
<div id="wrap">
<div id="menu">
<div id="t_menus" runat="server">
<div id="left">
<div class="Menu_Top">
</div>
<div id="a">
</div>
<div class="MenuBtm">
</div>
</div>
<div id="bottom_menu">
<div class="MenuTop">
</div>
<div id="bottommenu">
</div>
<div class="MenuBtm">
</div>
</div>
</div>
</div>
<div id="column_two">
<div id="right_top" class="right_top">
<asp:Panel ID="SrchPanel" runat="server" EnableViewState="False" Wrap="False">
<div id="logo">
<asp:ImageButton ID="logo" runat="server" ImageUrl="/images/l.gif" />
</div>
<div id="SrchDivMid">
<asp:textbox id="txtS" runat="server" MaxLength="50" value="Search"></asp:textbox>
<asp:button id="btnFind" runat="server" Text="Find" />
</div>
<div id="returnInfocenter">
<asp:HyperLink ID="return" runat="server" Text="Return"></asp:HyperLink>
</div>
</asp:Panel>
</div>
</div>
<div class="contentCont">
<div id="content">
<iframe id="iFrame" name="iframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src=""></iframe>
</div>
</div>
</div>
What it does is create simple google type layout like this image using css:
I want this to show like this... when user clicks on menu it loads up iframe with data. I want the css logo searchbox and return button come up and dotted line removed like this image:
I am trying few different things but its not working out. Can anyone please just guide me what approch should i take to achieve the result?
It will be tricky when user click on menu item, page layout change from style 1 to style 2 mentioned in photos.
Initially You need three main div elements
<div style="float:right;width:70%">Search Section</div>
<div style="float:left;width:28%">menu section</div>
<div style="clear:both"></div>
When menu item clicked all you need to transform div structure like this
<div style="width:100%">Search Section</div><!-- goes to top !>
<div style="float:left; width:28%">menu section</div>
<div style="float:right; width:70%;>iframe result section</div>
<div style="clear:both"></div>
Similar Shifting Require In Between Search Section e.g in start div structure look like
<div style="width:100%; padding:10px 0px; text-align:center;">Logo</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Box</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Links</div>
When menu clicked, shift style of these divs like
<div style="float:left;padding-left:10px; width:25%;">Logo</div>
<div style="float:left;padding-left:10px; width:50%;">Search Box</div>
<div style="float:left; width:20%;>Links</div>
<div style="clear:both;"></div>
You can create classes and when menu item clicked, replace one class with another to shift style of page layout.
Its general concept, rest require step by step tuning.
I'm a newbie in CSS layout. I need to display content like this:
+-------------------------------------+
| Content_A|
| Content_B Content_C ... |
+-------------------------------------+
I want a very simple markup and CSS, so I made this:
<div>
<div id="d1">
<div style="float: right;">Content_A</div>
</div>
<div id="d2">
<div style="float: left;">Content_B</div>
<div style="float: left;">Content_C</div>
<div>...</div>
</div>
</div>
But the result is this:
+-------------------------------------+
| Content_B Content_C ... Content_A|
+-------------------------------------+
Looks like default positioning of DIVs d1 and d2 is being ignored. Why and what's the solution?
If you have another markup/CSS suggestion for mentioned required layout (using SPAN for example), it will be welcome.
By the way, I mixed HTML and CSS just to make this problem easier to understand. In the real page, they will be separated!
Here is the solution:
<div>
<div id="d1">
<div style="text-align: right;">Content_A</div>
</div>
<div id="d2">
<div style="float: left;">Content_B</div>
<div style="float: left;">Content_C</div>
<div>...</div>
</div>
</div>
Let me know if it works for you or if you still have problem.
You can set display format for outer-most div to align the contents vertically:
<div style="display: table;">
<div id="d1">
<div style="float: right;">Content_A</div>
</div>
<div id="d2">
<div style="float: left;">Content_B</div>
<div style="float: left;">Content_C</div>
<div>...</div>
</div>
</div>
Try this:
<div>
<div id="d1">
<div style="float: right;">Content_A</div>
<div style="clear:both;"></div>
</div>
<div id="d2">
<div style="float: left;">Content_B</div>
<div style="float: left;">Content_C</div>
<div>...</div>
<div style="clear:both;"></div>
</div>
</div>
The clear property is a way of saying "make sure this element does not run alongside a previous float". Without having an element with clear, all later content on the page would attempt to flow alongside the columns. You could say that we're telling the browser, "the floats end here".
Check this link for more information.