Attempting to align or position the wrapper div in the center or using a float with a width of

I'm struggling to align the main div in the center of the page with a 100% width or at least float it to the left. Can someone please advise on how to achieve this?

http://jsfiddle.net/d36TC/6/

<div class="addInput"><div sytle="clear:both"></div>        
    <input class="input"  type="text" name="func_name"/>
        <b class="addText">Name of Function: </b>
</div>      

<div class="addInput">
    <input class="input"  type="text" name="func_location"/>
        <b class="addText">Location: </b>
</div>  

<div class="addInput">
    <input class="input"  type="text" name="func_date"/>
        <b class="addText">Date: </b>
</div>      

<div class="addInput">
    <input class="input"  type="text" name="func_timein"/>
        <b class="addText">Time In: </b>
</div>      

<div class="addInput">
    <input class="input"  type="text" name="func_timeout"/>
        <b class="addText">Time Out: </b>
</div>      

<div class="addInput">
    <input class="input"  type="text" name="AECap"/>
        <b class="addText">Adult Ed Pos.: </b>
</div>          

<div class="addInput">
    <input class="input"  type="text" name="SCCap"/>
        <b class="addText">Cook Pos.: </b>
</div>          

<div class="addInput">
    <input class="input"  type="text" name="WSCap"/>
        <b class="addText">Wait Staff Pos.: </b>
</div>          

<div class="addInput">
    <input class="input"  type="text" name="JTCap"/>
        <b class="addText">Jr. Training Pos.: </b>
</div>
htmlcsscss-float

Answer №1

Do you like this setup? I included an additional div to enclose the form components:

<div style="margin:0 auto; width:450px;">

http://jsfiddle.net/e82BN/9/

Answer №2

Here is a suggestion...

    .input
{
    height:30px;
    float:right;
    box-shadow:inset 0 1px 6px #000000;
    width:85%;
}

.addInput {
    float:left;
    width:100%;
}

.addText {
    line-height:30px;
    height:30px;
    float:left;
}

Check out this link for more details

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stable height with Internet Explorer 6

According to information found on davidwalsh, it is mentioned that in IE6, the container will continue to expand vertically even when a specific height is set. How can I establish a max-height in IE6 so that the container expands with its content until r ...

htmlcssinternet-explorer-6scrollbar

Converting Excel values to Exponential format using Python

I'm struggling to find a solution for extracting the Invoice Number in Python from an Excel sheet without turning it into exponential form. Expected Value: 8000030910 Result: 8.00002e+09 Python Result Excel sheet d1.append(sheet.cell_value(j,0)) ...

pythonhtmlexcel

Uncover each image individually

I have a task in React where I am displaying a list of images using the map method, and I want to reveal each image one by one after a delay. The images I am working with can be seen here and I need them to be revealed sequentially. The following code sni ...

javascriptcssreactjs

Assist the floats to "ascend" and occupy the available space

The screenshot showcases boxes that have been styled with "float: left". Is there a way to make these boxes float to the first available space in a column? For example, can we move the Music Nation box to the location indicated by the red arrow in the ima ...

csscss-float

Converting an Integer to a String and then manipulating the String format

<p class="card"> Credit Limit: <b style="color: #00e500 ;"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcf89c91b3b8b9b0f29faeb9b8b5a890b5b1b5a8f288b38fa8aeb5b2bb">[email protected]</a>().ToLocaleSt ...

c#htmlstringvisual-studioint

What steps can I take to prevent the "onclick" event from triggering multiple times?

I'm struggling to create a button that, when clicked, reveals a message input area. I am using the "onclick" attribute in the HTML and I want to ensure that the button is only clickable once to avoid generating multiple textareas on subsequent clicks. ...

javascripthtmlonclick

Adjusting cell width based on content in CSS to handle overflows automatically

I am facing a challenge with a table that has varying widths of content in each cell. I need the lengthy content to be displayed next to nowrap and overflow. After trying the solution mentioned here, all cells ended up with the same width. However, I requ ...

htmlcsshtml-tableoverflow

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

htmlcss

having each individual div function on its own accord

Is there a more efficient way to make HTML and CSS function independently without duplicating the code multiple times and changing IDs or class names? Currently, only the top male and female button works when clicked. I am looking for a CSS-only solution t ...

htmlcss

What is the reason for the attribute align="center" functioning in my HTML document?

Recently, I decided to delve into the world of HTML and created a simple basic file: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> My Webpage </title </head> ...

htmlalignment

When you hover over an image, its opacity will change and text will overlay

I am looking for a way to decrease the opacity and overlay text on a thumbnail image when it is hovered over. I have considered a few methods, but I am concerned that they may not be efficient or elegant. Creating a duplicated image in Photoshop with the ...

javascriptjqueryhtmlcssoverlay

After uploading my website, I noticed that one of the tabs appears in Chinese

After uploading my website, I noticed that one of the tabs (more info) is displaying in Chinese for some unknown reason. I'm not sure why this is happening. Here is the URL: You can also check out the code here: http://pastebin.com/jFBUV1ga ...

htmlcss

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

javascripthtmlcss

Once the image is loaded, cropped, and displayed on the canvas, what is the best way to implement image rotation functionality for the user before converting it to base64?

My process involves cropping images to a square shape and drawing them onto a canvas. if(img.height >= img.width) { ctx.drawImage(img, 0, 0, 110, 110 * img.height / img.width); } else { ctx.drawImage(img, 0 , 0, 110 * img.width ...

javascriptjqueryhtmlcsscanvas

After being redrawn, the line on the canvas vanishes

After updating the angle value, the line is quickly redrawn correctly but then disappears. It seems like the input value may be getting refreshed and set to undefined again. How can I ensure that the line retains the correct angle? <script language=" ...

javascriptjqueryhtmlcanvasline

Issue with Bootstrap 4 navigation tabs: dropdown items do not cycle through active tab panels

Whenever I utilize nav-tabs to toggle between tabpanels, it functions properly. However, there seems to be an issue when attempting to switch the active tabpanel using the links in the dropdown menu. Below is the HTML for my nav-tabs and dropdown menu, alo ...

htmlbootstrap-4

Dependency on the selection of items in the Bootstrap dropdown menu

I am currently struggling with a few tasks regarding Bootstrap Dropdown Selection and despite looking for information, I couldn't find anything helpful. Check out my dropdown menu Here are the functions I would like to implement: 1) I want the subm ...

javascriptjqueryhtmlcsstwitter-bootstrap

Choosing the right CSS selectors for elements within other elements

I'm trying to add a stagger effect to the fade-in animations of images within a gallery. After looking over my code, I believe the issue lies in how I am setting the animation-delay in the CSS selector. I am not sure if SCSS is supported in this snipp ...

htmlcsscss-selectors

vertical lines alongside the y-axis in a d3 bar graph

https://jsfiddle.net/betasquirrel/pnyn7vzj/1/ showcases the method for adding horizontal lines along the y axis in this plunkr. I attempted to implement the following CSS code: .axis path, .axis line { fill: none; stroke: #000; } I am lo ...

javascriptcssd3.js

Creating an attention-grabbing alert bar positioned above the menu

When I attempted to add this alert bar to my website, I encountered an issue where it was being hidden behind my menu. Some sources suggest that using z-index and position:absolute can resolve this problem by positioning one element above the other, but th ...

htmlcssmenustyles